使用鼠标拖拽边缘动画来触发mouseenter / mouseleave事件

Question

I'm trying to make a demo with visual feedback. A draggable element has to be dropped on a droppable element. This works perfectly with the inserted jquery and jquery-ui script.

My question:

I want to add a visual feedback by adding a mouseenter and mouseleave on this object (dragenter or dragover isn't supported within edge so thats no option). Because i'm dragging an image the droppable element doesn't fire the mouse events since there is simply a image inbetween them.

How can I make the droppable object see the mouse and still work when dropped?

sym.$("pdf_file").draggable({
  opacity: 0.40,
  revert: "invalid",
});


sym.$("droppable_object_01").droppable({
  accept: sym.$("pdf_file"),
  drop: function(){
  sym.play('start_drag_pdf_01');
  }
});

sym.play('mouse_enter').css({
  'opacity': 0.99,
});

sym.play('mouse_leave').css({
  'opacity': 0.00
});

Thanks

Answer 1

jQuery-ui's draggables have the over and out events that you can use:

sym.$("droppable_object_01").droppable({
    over: function() {
        // Run any code when the draggable is dragged over the droppable
    },
    out: function() {
        // Run any code when the draggable is dragged out of the droppable
    }
});

Here is an example: https://jsfiddle.net/5jtoawp8/

More information in the docs .

Answer 2

 <script src="jquery-3.1.0.min.js"></script>
 <script type="text/javascript">

    $(function () {
        $("#dvRestrictedArea").mouseenter(function () {
            alert("Mouce Enter into Restricted Area");
        });
        $("#dvRestrictedArea").mouseleave(function () {
            alert("Mouce leave from Restricted Area");
        });
    });

</script>

Thanks... :)