我目前正在开发的拖放系统遇到了一些问题。
我在 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>
呵呵,我终于找到了我要找的活动,之前我找不到:
.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>
在 Dropzone v 5.7.2 中(我没有检查其他/以前的版本),每当您将文件拖动到初始化的 dropzone 容器上时,Dropzone 库都会向该容器添加一个新类“dz-drag-hover”。
所以现在很容易添加额外的样式,例如:
.dz-drag-hover {
border: 2px solid blue;
}