Как можно перенести данные и события в новый элемент при клонировании перетаскиваемого объекта в пользовательском интерфейсе jQuery?

Question

У меня есть перетаскиваемый элемент с установленным helper: 'clone', но когда он клонирует элемент, ни один из data() или событий не являются постоянными в новом элементе.

Я пробовал несколько способов присоединить data(), но я не могу выделить новый элемент, а также старый элемент в том же выражении.

Например, я могу выбрать начальный элемент в перетаскиваемом событии stop():

$blah.draggable({
    helper: 'clone',
    stop: function(ev, ui) {
        var oldData = $(ev.target).data('blah');
    }
});

И я также могу получить новый элемент в событии droppable drop():

$blah.droppable({
    drop : function(ev, ui) {
        var $newElement = ui.draggable;
    }
});

Но я не могу придумать, как получить оба в одном и том же событии.

Что я хотел бы сделать, так это как-то передать данные, например ::

$newElement.data('blah', $oldElement.data('blah'));

Или иначе сделать данные постоянными, как вы можете с помощью $blah.clone(true);

Answer 1

Чтобы получить доступ к данным исходного элемента в выпадающем виде, вы можете использовать ui.draggable.context.В приведенном ниже примере контекст будет ссылаться на исходный перетаскиваемый элемент, и у вас будет доступ ко всему его содержимому.Draggable относится к новому элементу, который удаляется.

$("#droppable").droppable({
    drop: function(ev, ui) {        
        console.log(ui);
        console.log(ui.draggable.context);
        console.log($(ui.draggable.context).data('pic'));
    }
});

Answer 2

Я не слишком много работал с Droppable, но не могли бы вы просто сделать что-то подобное?

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

$("#droppable").droppable({
    drop: function(ev, ui) {
        $(this).append(ui.draggable.clone(true));
    }
});

Кажется, работает, если я чего-то не хватает:

http://jsfiddle.net/hasrq/

Answer 3

ui.item относится к перетаскиваемому элементу.Когда перетаскиваемый элемент клонируется, нет встроенного способа доступа к целевому элементу из функции receive.Тем не менее, есть немного хакерский способ сделать это:

$blah.sortable({
    receive: function (ev, ui) {
        var $target = $(this).data().sortable.currentItem;
        var $source = $(ui.sender);
        // now you can copy data from source to target
        $target.data('data-item', $source.data('data-item')); 
    } 
});

Answer 4

Оказывается, проблема была сортируемой, а не перетаскиваемой / сбрасываемой (позже я прикреплял сортируемую, но решил, что это не является частью проблемы, поэтому я оставил ее вне первоначального вопроса).

В итоге я использовал комбинацию решения @ kingjiv, описанного выше, вместе с не самым лучшим взломом, но, по крайней мере, похоже, что он работает:

$blah.sortable({
    receive: function(ev, ui) {
        // setting a global variable here
        MyGlobals.cloneCache = ui.item.clone(true);
    },
    stop: function(ev, ui) {
        $(ui.item).replaceWith(MyGlobals.cloneCache);
    }
});

Идея состоит в том, что вы сначала клонируете исходный элемент в событии receive(), кэшируете его в переменной, а затем заменяете этот элемент в событии stop().

Вроде некрасиво, но, по крайней мере, работает.