gpt4 book ai didi

css - 将事件监听器添加到 div 的标题

转载 作者:太空宇宙 更新时间:2023-11-04 15:10:34 24 4
gpt4 key购买 nike

我的 div 有多个事件监听器:dragstartdragenterdragoverdragleave 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 的标题响应这些事件:

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.

如何做到这一点?

最佳答案

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

但是那些事件监听器只有当你的标题是draggable=true

时才会工作

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

但是现在有一个问题,您不想只拖动标题,而是它的整个内容,即它的父 div。并且您想将其与另一个 header (您要删除的 header )的 parentNode.innerHTML 交换。

所以,你需要这样做:

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

working fiddle

关于css - 将事件监听器添加到 div 的标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15361336/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com