Trigger :hover selector when dragging

user_3660134 0
Viewed 21289

I'm having kind of an issue about a drag & drop system I'm currently developing.

I have a :hover style on a div the user can drop something on. It works when I simply hover over it, but not when I am dragging an element.

Is there a workaround to show that style even when dragging?

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

draggable hover drag-and-drop css jquery
2 Answers

Heh, I finally found the events I was looking for, I couldn't find them before :

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

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

Demo:

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

user_36601340

In Dropzone v 5.7.2 (I didn't check other/previous versions) whenever you are dragging a file over the initialized dropzone container, the Dropzone library adds a new class "dz-drag-hover" to that container.

So now it is very easy to add extra styling to that, e.g.:

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