javascript - 使用 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.)，您可以使用委托(delegate)事件进行点击，而不必担心使用深度克隆。

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

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

从示例中，您需要从克隆中保留的行为方面的内容并非 100% 明显。如果您能澄清，我会尽力确保这满足您的需求 :)

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

注意:不要对委托(delegate)事件使用 'body'，因为样式会导致 body 的高度为 0，事件可能不会发生!始终使用 document 作为后备。