使用 deepWithDataAndEvents = true 克隆的可拖动无法再次拖动

Question

我希望能够：

• 克隆可拖动对象并能够重新拖动它们
• 保持与初始可拖动 div 关联的数据和事件

目前，将 .clone 方法设置为 clone()，可以拖动克隆的可拖动对象，但可以理解的是，克隆不会保留初始可拖动对象的数据。

如果使用clone(true)，克隆的可拖动对象会保留初始可拖动对象的数据，但不能被拖动。

var dropped = jQuery(ui.draggable).clone().addClass("dropped").draggable(); //No data
var dropped = jQuery(ui.draggable).clone(true).addClass("dropped").draggable(); //Not draggable

有人知道问题可能是什么吗？任何帮助是极大的赞赏。这是我一直在研究的 jsFiddle - http://jsfiddle.net/wc71z5to/

Answer 1

如果您能够更新到稍晚版本的 jQuery（我在 JSFiddle 中使用 19.2.），您可以使用委托事件进行点击，而不必担心使用深度克隆。

http://jsfiddle.net/TrueBlueAussie/wc71z5to/2/

jQuery(document).on('click', '.component', function() {
  alert($( this ).data( 'name' ));
});

从示例中，您需要从克隆中保留哪些行为方面的内容并不是 100% 显而易见的。如果你能澄清一下，我会尽量确保这符合你的需求 :)

委托事件通过侦听冒泡到不变的祖先的事件来工作。 document 是默认值，如果没有什么方便/更接近的话。 然后 将 jQuery 选择器应用于气泡链中的元素。它然后为引起事件的任何匹配元素调用函数。这意味着元素不必在事件发生之前匹配，而不是在事件处理程序创建时匹配。

注意：不要将'body' 用于委托事件，因为样式会导致body 的高度为0，并且事件可能不会发生！始终使用 document 作为后备。