当拖动时触发:hover选择器

Question

我正在开发一个拖放系统，但遇到了问题。

用户可以将某些东西放在一个带有 :hover 样式的 div 上。当我仅悬停在上面时，它起作用，但当我正在拖动元素时却没有作用。是否有解决方法，即使拖动时也能显示该样式？

$(document).on('dragstart','#draggable',function(e){
  e.originalEvent.dataTransfer.setData("data",$(this).attr('data-text'));
});

$(document).on('drop','#droppable',function(e){
 console.log(e.originalEvent.dataTransfer.getData("data"));
});

$(document).on('dragover','#droppable',function(e){
  e.preventDefault();
});

div{
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-family: Arial
}
    
#droppable{
  border: 2px solid green;
}

#droppable:hover{
  background-color: rgba(0,0,0,0.2);
}
    
#draggable{
  border: 2px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="droppable">Hover me !</div>
<div id="draggable" draggable="true" data-text="I exist too ! :(">Drag me !</div>

- Zenoo

---

创建一个类并在拖动开始时添加它怎么样？ - Kushtrim

我不想在 dragstart 上更改任何内容，我想要更改我正在悬停的 div 的样式。 - Zenoo

Answer 1

嘿，我终于找到了我一直在寻找的活动，之前找不到它们：

.on('dragenter') // Triggers when you enter your element

.on('dragleave') // Triggers when you leave your element

演示：

$(document).on('dragstart','#draggable',function(e){
  e.originalEvent.dataTransfer.setData("data",$(this).attr('data-text'));
});

$(document).on('drop','#droppable',function(e){
    console.log(e.originalEvent.dataTransfer.getData("data"));
  $(this).removeClass('hover');
});

$(document).on('dragenter','#droppable',function(e){
  e.preventDefault();
  $(this).addClass('hover');
});

$(document).on('dragleave','#droppable',function(e){
  $(this).removeClass('hover');
});

div{
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-family: Arial
}
    
#droppable{
  border: 2px solid green;
}

#droppable:hover,#droppable.hover{
  background-color: rgba(0,0,0,0.2);
}
    
#draggable{
  border: 2px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="droppable">Hover me !</div>
<div id="draggable" draggable="true" data-text="I exist too ! :(">Drag me !</div>

- Zenoo

---

根据 https://www.smashingmagazine.com/2020/02/html-drag-drop-api-react/ 的建议，应该使用 dragenter 而不是 dragover，因为后者会在每次移动时触发。 - Alp

如何在纯JS中实现此功能。 - Jenuel Ganawed

@JenuelGanawed 使用 yourElement.addEventListener('dragenter', () => { ... }) - Zenoo

请注意，释放鼠标按钮时不会触发dragleave事件。您可能还希望在change事件中处理离开操作。 - Klesun

Answer 2

在 Dropzone v 5.7.2 中（我没有检查其他/之前的版本），每当您将文件拖动到初始化的 dropzone 容器上时，Dropzone 库都会向该容器添加一个新类“dz-drag-hover”。

因此，现在很容易向其中添加额外的样式，例如：

.dz-drag-hover {
  border: 2px solid blue;
}

- infografnet