Jquery Draggable placeholder drop over

Question

How can I make the placeholder element fire an event when dragged over? I've tried making it droppable on drag start but it still doesn't fire an event.

Here's an example fiddle .

Html-

<div class="draggable">
</div>
<div  class="draggable">
</div>
<div  class="draggable">
</div>
<div  class="draggable">
</div>

CSS-

.draggable{
   width: 50px;
   height: 50px;
   background-color: #000;
   border: 1px solid #fff;
}
.highlight{
    box-shadow: inset 0px 0px 10px 5px #fed700;
}

JQuery-

$(".draggable").draggable({
   helper: "clone",
   revert: "invalid"
}).droppable();

$(".draggable").on("dropover", function() {
   $(this).addClass("highlight");
});
$(".draggable").on("dropout", function (){
   $(this).removeClass("highlight");
});

When dragged over the item being dragged it doesn't change. I'm sure this is the default functionality but I'd like to display like a red X or something instead of the default nothing.

Thanks in advance!

Edit - So I guess I made this a little confusing. So when you drag an element it leaves a placeholder behind. All I want is that placeholder to have a dropover event fire when you drag over it again.

Answer 1

Element being dragged saved when drag start: http://jsfiddle.net/e70bvst1/10/ EDIT, in this fiddle it's red from the start: http://jsfiddle.net/e70bvst1/13/

var currentDraggedElement;
$(".draggable").draggable({
start: function(e){
    currentDraggedElement = e.target;
    $(currentDraggedElement).addClass("red");
},
stop: function(e){
    $(currentDraggedElement).removeClass("red");
},
helper: "clone",
    revert: "invalid"
}).droppable();

$(".draggable").on("dropover", function(e) {
    $(this).addClass("highlight");
});
$(".draggable").on("dropout", function (e){
    $(this).removeClass("highlight");
    currentDraggedElement = null;
});

hope this is really what you needed.