Question

我有一个HTML网格，当元素A拖动到另一个元素B上时，我想在网格内重新排列元素A和B。这应该在放置元素之前发生。

在元素A上拖动元素B时是否可以捕获事件？我不想等到用户放下元素后，才需要在元素上拖动元素时重新排列。

Answer 1

这是dragenter事件。

ondragstart = e => e.dataTransfer.setData('text', '');
// set the class when entering over #target
target.ondragenter = e => target.classList.add('draghover');
// remove when leaving
target.ondragleave = e => target.classList.remove('draghover');

#target {
  width: 250px;
  height: 250px;
  border: 1px solid;
}

#target.draghover {
  background: #CCC;
}

<div draggable="true">drag me over the target</div>
<div id="target"></div>

Answer 2

是的，有一个 ondrag() 事件处理程序，该事件处理程序在拖动元素时触发。如果要在拖动操作开始时触发功能，则还有 ondragstart() 事件处理程序。

如果要捕获将元素拖放到元素上（但不放下）时捕获的元素，则会触发一次 ondragenter() ，因为元素是将拖入元素，以及 ondragover() ，当将元素拖到上时会重复触发。

将元素拖到另一个元素上时的HTML / JavaScript事件

2 个答案: