在jQuery UI中克隆可拖动对象时,如何将数据和事件传输到新元素？

Question

我有一个带有helper: 'clone'set 的draggable元素,但是当它克隆元素时,没有任何data()或者事件在new元素中是持久的.

我已经尝试了很多方法来重新附加data(),但我似乎无法选择新元素以及同一语句中的旧元素.

例如,我可以在draggable 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

要在drop中访问原始元素的数据,可以使用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/