触发：拖动时悬停选择器

Question

我遇到了一个关于我目前正在开发的拖放系统的问题。

我在 div 上有一个 :hover 样式，用户可以在上面放置一些东西。当我简单地将鼠标悬停在它上面时它起作用，但当我拖动一个元素时它不起作用。

是否有解决方法可以在拖动时显示该样式？

$(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>

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>

Answer 2

在 Dropzone v 5.7.2（我没有检查 other/previous 版本）中，每当您将文件拖到初始化的 dropzone 容器上时，Dropzone 库都会添加一个新的 class "dz-drag-hover" 到那个容器。

现在可以很容易地为其添加额外的样式，例如：

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

触发：拖动时悬停选择器

Trigger :hover selector when dragging

css

jquery

drag-and-drop

draggable

hover