javascript 在 jQuery UI 中克隆可拖动对象时，如何将数据和事件传输到新元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6392311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When cloning a draggable object in jQuery UI, how can you transfer the data and events to the new element?
提问by Jon Raasch
I have a draggable element with the helper: 'clone'set, but when it clones the element, none of the data()or events are persistent in the new element.
我有一个带有helper: 'clone'集合的可拖动元素，但是当它克隆元素时，没有任何data()或 事件在新元素中是持久的。
I've tried a number of ways to reattach the data(), but I can't seem to select the new element as well as the old element in the same statement.
我尝试了多种方法来重新附加data()，但我似乎无法在同一语句中选择新元素和旧元素。
For instance, I can select the initial element in the draggable stop()event:
例如，我可以在可拖动stop()事件中选择初始元素：
$blah.draggable({
helper: 'clone',
stop: function(ev, ui) {
var oldData = $(ev.target).data('blah');
}
});
And I can also get the new element in the droppable drop()event:
而且我还可以在 droppabledrop()事件中获取新元素：
$blah.droppable({
drop : function(ev, ui) {
var $newElement = ui.draggable;
}
});
But I can't figure out a way to get both in the same event.
但我想不出在同一事件中获得两者的方法。
What I'd like to do is somehow transfer the data, e.g.:
我想做的是以某种方式传输数据，例如：
$newElement.data('blah', $oldElement.data('blah'));
Or otherwise make the data persistent, like you can with $blah.clone(true);
或者以其他方式使数据持久化，就像您可以使用 $blah.clone(true);
回答by Alex Achinfiev
To get access to the data of original element in drop you can use ui.draggable.context. In the example below context would refer to the original dragged element and you have access to all of its content. Draggable refers to the new element that is being dropped.
要访问 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'));
}
});
回答by James Montagne
I haven't worked too extensively with droppable, but couldn't you just do something like this?
我还没有对 droppable 进行过广泛的工作，但是你不能做这样的事情吗？
$(".draggable").draggable({
helper: 'clone'
});
$("#droppable").droppable({
drop: function(ev, ui) {
$(this).append(ui.draggable.clone(true));
}
});
Seems to work unless there's something I'm missing:
除非我遗漏了什么，否则似乎有效：
回答by Jon Raasch
Turns out the problem was sortable, not draggable / droppable (I was attaching sortable later on, but figured it wasn't part of the problem here so I left it out of the original question).
原来问题是可排序的，而不是可拖动/可放置的（我后来附加了可排序的，但认为这不是问题的一部分，所以我把它排除在原始问题之外）。
I ended up using sort of a combination of @kingjiv's solution above, along with a not-the-greatest hack but at least it seems to be working:
我最终使用了上面@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);
}
});
The idea is that you first clone the original item in the receive()event, cache this in a variable, and then replace the item with that in the stop()event.
这个想法是你首先克隆receive()事件中的原始项目，将其缓存在一个变量中，然后用stop()事件中的项目替换该项目。
Kind of ugly but at least it's working.
有点丑，但至少它是有效的。
回答by dkl
ui.itemrefers to dragged item. When the dragged item is cloned, there is no built-in way to access the target item from receivefunction. However, there is a bit hacky way how to do it:
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'));
}
});
