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

【问题标题】：Is it possible to use the HTML5 drag-and-drop in dynamically created elements?是否可以在动态创建的元素中使用 HTML5 拖放功能？
【发布时间】：2014-11-17 22:25:38
【问题描述】：

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

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

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

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

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

那么，任何人都有将 HTML5 拖动事件绑定到动态创建的元素的成功案例，还是不可能？谢谢！

【问题讨论】：

添加新元素后需要使用事件委托或添加事件监听器
@ Juhana 这是一个类似的问题，但我已经在使用.on() 绑定，它适用于 jQuery 事件。问题是我试图通过 HTML5 可拖动事件来实现这一点。我会尽量澄清我的问题。谢谢！
@patrickEvans，我认为这个问题已被错误地标记为重复。请您或 Juhana 考虑重新打开它吗？我一直无法找到特定于在其他任何地方绑定 HTML5 拖动事件的信息。谢谢！
不，您的问题与标记问题中的相同，只需将他们使用的事件名称替换为您的拖放事件名称。您不能只使用 .on 您必须使用静态父元素（不会更改的）document 经常使用。见this Demo（将红色方块拖到绿色方块）
@patrickEvans 太棒了！你说得对。我自己无法成功实现它，但你的例子证明它是可能的。感谢您抽出宝贵时间回复我 - 我真的很感激。

标签： javascript jquery html drag-and-drop

【解决方案1】：

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

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

第二个是构建你的代码，以便在你的 newElement 被创建之后调用你的绑定函数：

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

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

【讨论】：

有谁知道如何在原生 JavaScript 中做到这一点？