Fire mouseenter/mouseleave Ereignis mit Drag und Drop in Rand animieren

Question

Ich versuche, eine Demo mit visuellen Feedback zu machen. Ein ziehbares Element muss auf ein abtropfbares Element fallen gelassen werden. Dies funktioniert perfekt mit dem eingefügten jquery und jquery-ui-Skript.

Meine Frage:

Ich möchte ein visuelles Feedback hinzufügen, indem Sie einen MouseEnter- Hinzufügen und Leave auf dieses Objekt (dragenter- oder dragover- nicht innerhalb Kante unterstützt so das ist keine Option). Da ich ein Bild ziehe, löst das abtropfbare Element keine Mausereignisse aus, da sich einfach ein Bild dazwischen befindet.

Wie kann ich das Dropbare Objekt sehen die Maus und funktioniert immer noch, wenn sie fallengelassen?

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 
}); 

Dank

Answer 1

jQuery-UI draggables haben die over und out Ereignisse, die Sie verwenden können:

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 
    } 
}); 

Hier ist ein Beispiel: https://jsfiddle.net/5jtoawp8/

Weitere Informationen 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> 

Danke ... :)