将事件侦听器添加到 div 的标题答案

【问题标题】：Adding evenlistener to header of div将事件侦听器添加到 div 的标题
【发布时间】：2013-02-27 23:20:21
【问题描述】：

我的 div 有多个事件监听器：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);
    });
}

但是此代码将事件监听器添加到整个 div。我只希望 div 的标头响应这些事件：

现在我可以单击 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.

如何做到这一点？

【问题讨论】：

可以添加HTML代码吗？
@Babblo 已添加。
但您要将事件添加到整个 div.column？尝试仅将其添加到
@ManishMishra 是的，这就是我要问的，如何仅将其添加到标题中；-)

标签： css html drag-and-drop

【解决方案1】：

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

但那些event listeners 仅在您的标题为draggable=true 时才有效

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

但是现在有一个问题，你不想只拖动标题，而是拖动它的全部内容，即它的父 div。并且您想将其与另一个标头的 parentNode.innerHTML 交换（您将在该标头上删除）。

所以，你需要这样做：

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

working fiddle

【讨论】：