jQuery drag & drop: клонированные перетаскиваемые ходы оригинал

Question

У меня проблема с Drag & Drop в jQuery.В моем коде есть перетаскиваемый div.Когда я перемещаю его в определенную ячейку таблицы, к которой добавлен файл, клон таблицы добавляется к ячейке таблицы.Но когда я перетаскиваю клона, вместо этого перемещается оригинальный div.Вот эта функция, вызываемая по капле:

function(event, ui)
{
    var draggable = ui.draggable.clone(true);  // cloning including attrs and children
    draggable.draggable(); // this is something I tried with no effect
    $(this).empty(); // empty the droppable cell
    $(this).append(draggable); // append the div to the cell
}

Я не смог найти четкого ответа от Google.Я не знаю, имеет ли это какое-либо отношение к этому, но у div есть относительная позиция (и он должен оставаться таким).

Как сделать так, чтобы клон можно было перетаскивать так же, как его оригинал?

Answer 1

Вот как я бы это сделал, это должно сработать.

 $(".draggable").draggable({ helper: 'clone' });
 $(".droppable").droppable({
    drop: function (event, ui) {
       ui.draggable.clone().appendTo($(this)).draggable();
    }
 });

Я не знаю, сделали ли вы, но не используйте идентификаторы для перетаскиваемого объекта, потому что они тоже будут клонированы.Кроме того, вы должны добавить элемент перед применением к нему перетаскиваемого объекта.

Answer 2

Измените свой draggable код инициализации, включив в него helper: "clone"

 $("selector").draggable({
      ...
      helper: "clone",
      ...
 });

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

Answer 3

вы пытались передать false в .clone ()?Этот bool означает withDataAndEvents, поэтому вы наследуете все те же события, которые также прикреплены к старому объекту.

Edit: если вам нужен withDataAndEvents по другим причинам, вы можете попробовать использовать draggable ("destroy")на оригинале прямо перед тем, как сделать клон, а затем сделать его перетаскиваемым снова после?Не самый элегантный, но работает: http://jsfiddle.net/GheD5/

Answer 4

Можете ли вы показать полный код?Я только догадываюсь сейчас, но использование делегата () http://api.jquery.com/delegate/ может быть ключом к вашему решению.

Answer 5

Вы смотрели на вспомогательный вариант ?