jQuery - getting two functions to work with each other

I'm not too confident with jQuery, ho开发者_StackOverflow社区wever it proves useful for features like dragging and uploading files.

I've tried combining a script I found that allows me to upload files without page refresh (which works) and I developed my own dragging system (which works).

The problem I have is that when an image is uploaded, I cannot drag it - yet I can drag if the image is already there. Basically - I can't seem to get one to talk to the other.

The upload function starts as follows:

$(document).ready(function(){
    ....
    $('#upload_container').html("<img class='drag-image' id='draggable' src='"+response+"'>);
dragme();
    ....
});

I did originally have $('#upload_container').html as document.getElementByID('upload_container').innerHTML but I seem to remember that would stop the jQuery from picking up the dragme(); declaration (though still doesn't seem to work. Firefox still states that the dragme() function hasn't been defined even though it is there - so I believe that I am calling it incorrectly.

The dragme jQuery starts as follows:

$(document).ready(function dragme(){
    ....
    $("#draggable").draggable({
        drag: function(event, ui){ 
            var pos = $(this).offset();
            $("#x").val(pos.left);
            $("#y").val(pos.top);
        }
        ....
    });
    ....
});

Will it work if the two are combined or is there a way for them to work by a correct call?

It sounds like you are wanting the images loaded from your "Load" call to be draggable.

The problem with what you have is the "Ready" function fires once the original page is loaded, but does not cover any elements loaded after it is fired.

So whatever LOAD function you are using should have a callback. In that callback you will want to recall the draggable function.

So the code would look like:

$(document).ready(function(){

    function createDrag(target)
    {
        target.draggable({
            drag: function(event, ui){ 
                var pos = $(this).offset();
                $("#x").val(pos.left);
                $("#y").val(pos.top);
            }
        });
    }

    createDrag($("#draggable"));

    $('#loader').load('url', function(){ createDrag($("#draggable")); });

});

Assuming that the following code should be executed after a file has been uploaded, you are doing it wrong (Sorry, couldn't resist today).

$(document).ready() should only be called once, after DOM init.

$(document).ready(function(){
    ....
    $('#upload_container').html("<img class='drag-image' id='draggable' src='"+response+"'>);
dragme();
    ....
});

Also, you probably don't want to define functions after DOM initialization, which you are doing with the dragme() function. This will most likely result in unwanted behaviour that you are seeing across different browsers:

Firefox still states that the dragme() function hasn't been defined even though it is there - so I believe that I am calling it incorrectly.

The above behaviour is most likely a result of this.

Since you are dynamically adding files by uploading them, you could do something like this:

$(file).uploaded(function(result) {
    var img = $('<img src="foo"/>');
    $('#upload_container').append(img).
    $(img).draggable();
});