Search code examples
jqueryjquery-uijquery-file-upload

Make the Images Uploaded via JqueryFileUpload Plugin Draggable and Droppable to a specific div Location

Am using this plugin to do multiple image file uploads.

http://blueimp.github.io/jQuery-File-Upload/

My problem is that after uploading the images i need to make the images draggable and drop them to another location say a div with id="dropHere" which will be on the same page.

I tried using jquery ui dragndrop but its not working.

Once the image is uploaded following html is generated

<table class="table table-striped" role="presentation">
    <tbody class="files">
        <tr class="template-download fade in">
            <td>
                <span class="preview draggable">
                    <a data-gallery="" download="Koala.jpg" title="Koala.jpg" href="http://localhost/Testing/server/php/files/Koala.jpg">
                        <img src="http://localhost/Testing/server/php/files/Koala.jpg">
                    </a>
                </span>
            </td>
        </tr>
        .
        .
        .
        .
        so on
    </tbody>
</table>

so i added the following script to make it draggable

 <script>
$(function() {
$( ".draggable" ).draggable();
});
</script>

But nothing happens, but when i try this on any other elemments the draggable is working, I guess maybe some conflict is happening , but i cant find out what it is...

Please guide me in the right direction to make this working.

Thankz.

Solution

  • Explication

    Your script is executed when the page is ready, then you live upload images and you can't drag them because there is no events registering these new content.

    Fractaliste's solution

    You can maybe add this line at the end of your done callback provided by in order to register drag event on live content:

    $(".draggable[class!='ui-draggable']").draggable();

    A basic Fiddle

    Scrappy Coco's solution

    $(document).on('mouseover', ".draggable", function(e) { $(this).draggable(); });