0

我的 div 有多个事件监听器：dragstart、dragenter、dragover、dragleave和.dropdragend

要将它们附加到我的 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 的黑色部分（标题）来移动它。黑色部分是headerCSS 中的一个简单部分。

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 可以在这里找到。

如何才能做到这一点？

4

1 回答 1

1

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

但event listeners只有当你的标题是draggable=true

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

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

所以，你需要这样做：

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

工作小提琴

于 2013-03-12T14:21:00.457 回答