Javascript 如何通过HTML5中的DNDAPI传递html元素的事件？

我的问题是关于html的拖放api。我希望以本机方式执行此操作，但在删除元素后，我会丢失事件处理程序。因为我不知道如何在“dataTransfer”对象中设置html的所有数据，所以我无法这样做

基本上，我是在制作一个列表，通过拖放可以交换列表项。我动态创建了列表项，如下所示：

var div1 = document.createElement("div");//the span element to contain text
var span = document.createElement("span");
//the textnode inside of div1 at starting
var txt1 = document.createTextNode(textdata);
//the option button on div1
var optionBtn = document.createElement("button");
//the option button text
var optionText = document.createTextNode("options");
span.appendChild(txt1);

    div1.appendChild(span);
    optionBtn.appendChild(optionText);
    optionBtn.addEventListener("click",function(){
        console.log("clicked on options")
    });
    div1.appendChild(optionBtn);
    div1.classList.add("draggableDiv");//this div1 is later appended inside my html

我将上述代码放在一个函数中，并在由“textdata”组成的数组的forEach中调用此函数：

var textdatas = ["a","b","c"];

下面给出了我为DnD所做的工作。对于我在上面添加的每个列表项，我执行以下操作：

//element that I am dragging
elem.addEventListener("dragstart",function(e){
        e.dataTransfer.setData('text/html', this.innerHTML);
        dragSrcEl = this;
    });

//element where I am dropping
elem.addEventListener("drop",function(e){
        if (e.stopPropagation) {
            e.stopPropagation(); // Stops some browsers from redirecting.
          }

          if (dragSrcEl != this) { // the dragSrcEl contains the dragging element's data
             dragSrcEl = this.innerHTML;
             this.innerHTML = e.dataTransfer.getData('text/html');
          }
    });

现在的问题是，我不知道如何在DnD的“数据传输”中传递“optionBtn”事件（或任何子元素的任何事件）

---

请为此提供解决方案。任何帮助都将不胜感激。

我想您希望使用拖放来重新排列菜单项？简短提示：draggable元素需要一个

draggable=true

DOM属性。在我看来，您不需要存储

dragSrcEl

，因为您可以检查来自

dataTransfer

对象的拖动类型和数据（我理解“检查”是最后一次

if

的原因）。您可能希望检查事件的

目标

元素并存储适当的数据（例如按钮文本/值，而不是

内部HTML

）。要接受有效的拖放目标，您必须阻止

dragover

事件默认取消行为。是的，我想对菜单项重新排序，但不想在拖动后丢失菜单项内按钮上的事件处理程序。此外，我不想每次拖放时调用函数来附加事件处理程序。