How to start mouseover event while dragging

In all presented answers, I don’t see the most simple and obvious one (maybe I’m missing something in OP question). But, if someone stumble upon this later, and needs fast and simple solution in pure JS..

You do it by changing element className ondragover, and changing back to original class ondragleave

my_element.ondragover = function(ev) {  
 ev.preventDefault();  
 this.className="myElem_dragover";  
}  
my_element.ondragleave = function(ev) {  
 ev.preventDefault();  
 this.className="myElem_orig";  
}

CSS

.myElem_orig {     //this is your initial class for element
  top: 30px;
  left: 20px;
  .....
  background-color: blue;  
}  

.myElem_orig:hover {   //this is hover state, just changing bg color
  background-color: red;
}

.myElem_dragover { //new class, needs all attributes from original class
  top: 30px;
  left: 20px;
  ........ 
  background-color: red; //behaves the same like hover does
}

edit:
forgot to mention, you need to bring back original class ondrop too, otherwise div will stay in dragover class

Leave a Comment