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

Question

我有一个带有 helper: 'clone' 集的可拖动元素，但是当它克隆该元素时，data() 或事件都不会持久存在新元素。

我已经尝试了多种方法来重新附加 data()，但我似乎无法在同一语句中选择新元素和旧元素。

例如，我可以在可拖动的 stop() 事件中选择初始元素:

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

而且我还可以在可转换的 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'));
    }
});