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

Question

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

我尝试了多种方法来重新附加 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/

Answer 3

事实证明，问题是可排序的，而不是可拖动/可放置的（我后来附加了可排序的内容，但认为这不是问题的一部分，所以我将其排除在原始问题之外）。

我最终使用了上面@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() 事件中的项目。

有点丑，但至少它可以工作。

Answer 4

ui.item 指的是拖动的项目。当拖动的项目被克隆时，没有内置方法可以从 receive 函数访问目标项目。然而，有一个有点hacky的方法来做到这一点：

$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')); 
    } 
});