如何触发拖放事件到JS主开发中的任何子div中的任何项目

Question

我有类似的物品清单

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

还有一个容器div ，其子项像孩子一样

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

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

编辑：我的脚本是

function drop(event) {
  alert();
}

Answer 1

这应该工作

 <div class="container">
   <div class="row">
         <div class="child-row" onDragOver={(e) => e.preventDefault()} onDrop={(e) => {console.log(e, 'inside');}}>
         </div>
    </div>
  </div>
 <ul>
    <li draggable="true">item 1</li>
    <li draggable="true">item 2</li>
    <li draggable="true">item 3</li>
  </ul>

给子div高度和宽度以标识dropevent

.child-row{
 height: 51px;
 width: 147px;
 border: 1px solid;
}

Answer 2

为了使div事件发生在div元素上，必须根据MDN页面使用event.preventDefault()来取消dragenter和dragover事件：

如果要允许丢弃，则必须通过取消事件来防止默认处理。 您可以通过从属性定义的事件侦听器返回false或通过调用事件的preventDefault（）方法来执行此操作...在Dragenter和Dragover事件期间都调用preventDefault（）方法将指示在该位置允许放置位置。

您可以通过使用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> 

Answer 3

我想您想要以下类似的东西-

 function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); } function allowDrop(event) { event.preventDefault(); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); //console.log(data) } 

 .container .child-row{ width: 150px; height: 70px; border: 1px solid #000; } ul{ width: 150px; height: 70px; border: 1px solid red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul ondrop="drop(event)" ondragover="allowDrop(event)"> <li id="item1" ondragstart="dragStart(event)" draggable="true">item 1</li> <li id="item2" ondragstart="dragStart(event)" draggable="true">item 2</li> <li id="item3" ondragstart="dragStart(event)" draggable="true">item 3</li> </ul> <div class="container" ondrop="drop(event)"> <div class="row"> <div class="child-row" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> </div> </div>