jQuery UI Draggable Helper Issue?

Question

У меня есть куча фотографий слева, и я хочу перетащить их в слот справа, но когда я перетаскиваю изображения в слот справа, то слева исчезает.

Я добавил helper: 'clone' к моей функции draggable, и он все еще удаляет ее. Я использую ui.draggable.css позиционирование, чтобы поместить перетаскиваемый элемент в конец слота. Я думаю, что это может быть проблемой, но я не уверен, как это исправить?

Есть ли способ клонировать объект, прежде чем перетаскивать его, а затем перетащить объект в недоступное место? Без необходимости использовать .css для ручной перетаскивания перетаскиваемого элемента на верхнем слоте.

Answer 1

Самый простой способ выполнить то, что вы просите, - объединить его с классом droppable. Вот очень основная идея о том, что я имею в виду:

<img class="draggable" src="http://jsfiddle.net/img/keys.png"> 
<img class="draggable" src="http://jsfiddle.net/img/logo.png"> 
<img class="draggable" src="http://jsfiddle.net/img/info-close.png"> 

<div id="dropzone" class="dropzone" style=""></div> 


$(function() { 
    $(".draggable").draggable({ 
     helper: "clone", 
     grid: [ 20,20 ] 
    }); 
    $("#dropzone").droppable({ 
     drop: function(event, ui) { 
      $this.append(ui.draggable); 
     } 
    }); 
}); 

Я добавил jsfiddle (http://jsfiddle.net/fordlover49/deb9W/) для вас.