javascript - 如何为在 JS 中的主开发人员内的任何子 div 内拖放的任何元素触发放置事件

Question

我有一个元素列表，例如

<ul>
  <li draggable="true">item 1</li>
  <li draggable="true">item 2</li>
  <li draggable="true">item 3</li>
</ul>

和一个容器 div 像 child 一样划分

<div class="container" ondrop="drop(event)">
  <div class="row">
    <div class="child-row">
    </div>
  </div>
</div>

当任何列表项被拖放到容器类中的任何子 div 中时，我如何触发事件或仅调用警报？谁能帮帮我？

编辑:我的脚本是

function drop(event) {
  alert();
}

Answer 1

要在 div 元素上发生 drop 事件，您必须使用 event.preventDefault() 取消 dragenter 和 dragover 事件, 根据 MDN page :

If you want to allow a drop, you must prevent the default handling by cancelling the event. You can do this either by returning false from an attribute-defined event listener, or by calling the event's preventDefault() method ... Calling the preventDefault() method during both a dragenter and dragover event will indicate that a drop is allowed at that location.

您可以通过使用 document.querySelector('.container') 查询您的容器，然后使用 target.addEventListener() 附加适当的事件监听器来执行此操作，或者将它们直接附加到 HTML 中。

您只需为父容器执行此操作，它也适用于子容器。

function drop(event) {
  const item = event.dataTransfer.getData('text');
  const target = event.target.querySelector('.target');
  if (target) {
    target.textContent = `${target.textContent}${target.textContent && ','} ${item}`;
  }
}

function drag(event) {
  event.dataTransfer.setData('text', event.target.textContent);
}

function cancel(event) {
  event.preventDefault();
}

ul {
  display: inline-block;
  margin-right: 20px;
}
.container {
  display: inline-block;
  border: 1px solid black;
  padding: 10px;
  min-width: 200px;
}
.row {
  border: 1px solid black;
  background: #eee;
  padding: 10px;
}
.child-row {
  border: 1px solid black;
  background: #ddd;
  padding: 10px;
}
.target {
  background: #0ff;
}

<p>Drag the list items in the rectangles:</p>
<ul>
  <li draggable="true" ondragstart="drag(event)">item 1</li>
  <li draggable="true" ondragstart="drag(event)">item 2</li>
  <li draggable="true" ondragstart="drag(event)">item 3</li>
</ul>

<div class="container" ondrop="drop(event)" ondragenter="cancel(event)" ondragover="cancel(event)">
  Container <span class="target"></span>
  <div class="row">
    Row <span class="target"></span>
    <div class="child-row">
      Child Row <span class="target"></span>
    </div>
  </div>
</div>