javascript - 是否可以在动态创建的元素中使用 HTML5 拖放功能？

Question

编辑:我知道这看起来像是一个重复的问题，但它非常特定于 HTML5 拖动事件。我在添加 jQuery 事件时没有问题，只是 HTML5 拖放功能。

我已经多次使用基本的 jQuery 向页面添加拖放功能，但我想为我当前的项目使用新的 HTML5 拖放功能。拖动对于我包含在 HTML 中的任何元素都非常有效，但我似乎无法动态添加元素并使它们可拖动。我怀疑这是因为在创建新元素之前加载页面时所有可拖动事件监听器都已绑定(bind)。有没有人有幸使用 HTML5 使动态添加的元素可拖动？或者有没有办法在不重新加载页面的情况下重新绑定(bind)事件监听器？

对任何 HTML5 拖动事件使用 .bind() 似乎都不起作用。即，

$(newElement).bind('drag', function(e){
  console.log('do you even drag, bro?');
});

永远不会触发，尽管 .bind() 与点击事件工作正常。我猜这是因为“拖动”对 jQuery 没有任何意义。顺便说一下，我在新元素中包含了 draggable="true" HTML 标签。

那么，任何人都有将 HTML5 拖动事件绑定(bind)到动态创建的元素的成功案例，或者这是不可能的？谢谢!

Answer 1

有两种方法可以做到这一点。第一种是使用在调用 bind() 时存在的某种祖先元素:

$('.someParent').on('drag', '.newElement', function(){
    console.log('do you even drag, bro?');
});

第二个是构建代码，以便在创建 newElement 后调用绑定(bind)函数:

var $newElement = $('<div class="newElement"></div>');

$newElement.on('drag', function(e){
    console.log('do you even drag, bro?');
});