Сделайте изображения, загруженные через JqueryFileUpload Plugin Draggable и Droppable для определенного div.

Question

Я использую этот плагин для загрузки нескольких файлов изображений.

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

Моей проблема заключается в том, что после загрузки изображения мне нужно, чтобы сделать изображение перетаскивать и поместите их в другое место, скажем, DIV с идентификатором = «dropHere», которая будет находиться на ту же странице.

Я пробовал использовать jquery ui dragndrop, но не работал.

После того, как изображение будет загружено следующий HTML генерируется

<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> 

поэтому я добавил следующий сценарий, чтобы сделать его перемещаемой

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

Но ничего не происходит, но когда я попробовать это на других elemments draggable работает, Возможно, какой-то конфликт происходит, но я не знаю, что это такое ...

Прошу вас, в правильном направлении, чтобы это работало.

Thankz.

Answer 1

Экспликация

Ваш скрипт выполняется, когда страница будет готова, тогда вы живёте загружать изображения, и вы не можете перетащить их, потому что нет никаких событий, регистрирующие эти новое содержание.

решение Fractaliste в

Вы можете, возможно, добавить эту строку в конце вашего сделали обратного вызова, предоставленной jquery-file-upload для того, чтобы зарегистрировать событие тянуться содержания в реальном времени:

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

A basic Fiddle

Scrappy Коко раствор

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