Question

我的div有多个eventlisteners：dragstart，dragenter，dragover，dragleave，drop和dragend。

要将它们附加到我的div，我使用body onload函数：

function addListeners()
{
    var cols = document.querySelectorAll('#columns .column');
    [].forEach.call(cols, function(col) {
      col.addEventListener('dragstart', handleDragStart, false);
      col.addEventListener('dragenter', handleDragEnter, false);
      col.addEventListener('dragover', handleDragOver, false);
      col.addEventListener('dragleave', handleDragLeave, false);
      col.addEventListener('drop', handleDrop, false);
      col.addEventListener('dragend', handleDragEnd, false);
    });
}

但此代码将eventlistener添加到整个div。我只想让div的标题响应这些事件：

drag and drop example

现在我可以点击div的任何部分并拖动它，但我只想点击div的黑色部分（标题）来移动它。黑色部分是CSS中的简单header。

HTML

<body onload="addListeners()">

<div id="columns">
  <div class="column" draggable="true"><header>A</header>Textual information inside div A</div>
  <div class="column" draggable="true"><header>B</header>Textual information inside div B</div>
  <div class="column" draggable="true"><header>C</header>Textual information inside div C</div>
</div>

</body>

我的整页的JSFiddle可以找到here.

如何做到这一点？

Answer 1

您需要将EventListeners添加到header元素中。

但只有当您的标题为event listeners

时，draggable=true才有效

因此，通过向标头添加EventListeners并使其成为draggable=true，您可以开始拖动它。

但是现在有一个问题，你不想只拖动标题，而是整个内容，即它的父div。并且你想将它与另一个标题的parentNode.innerHTML交换（你要放弃它）。

所以，你需要这样做：

将事件添加到标题元素
执行所有其他操作，即抓取然后在标题的父级上交换innerHTML，即this.parentNode
当你执行innerHTML交换时，所有的事件监听器都会丢失，因为现在，重新创建了非常可拖动的元素，因此你必须再次调用事件绑定函数addListeners()。

working fiddle

将事件侦听器添加到div的标头

HTML

1 个答案: