over

Triggered when a draggable element is dragged over the droppable.

Parameters

NameTypeDescription
e {object} event data
mousePosition {object} Current mouse position as { top, left } object.

Examples

sample

    
 <style>
 .draggable { border: 1px solid #999; width: 300px; height: 200px; text-align: center; }
 .droppable { border: 1px solid #999; width: 300px; height: 200px; text-align: center; }
 .hover { background-color: #FF0000; }
 </style>
 <div id="droppable" class="droppable">Drop Here</div>
 <div id="draggable" class="draggable">Drag Me</div>
 <script>
     $('#draggable').draggable();
     $('#droppable').droppable({
         over: function() {
             $(this).addClass('hover')
         },
         out: function() {
             $(this).removeClass('hover')
         }
     });
 </script>