Trigger :hover selector when dragging
18,427
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>
Related videos on Youtube
Author by
Zenoo
Just trying to share some knowledge and gain some at the same time.
Updated on June 04, 2022Comments
-
Zenoo almost 2 years
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>
-
Alp over 3 yearsAccording to smashingmagazine.com/2020/02/html-drag-drop-api-react you should use
dragenter
instead ofdragover
since the latter is triggered for each movement. -
Jenuel Ganawed over 2 yearshow to do this in pure JS
-
Zenoo over 2 years@JenuelGanawed Use
yourElement.addEventListener('dragenter', () => { ... })