ドラッグしてマウスを動かすと、mouseleaveイベントが発生します。

Question

私は視覚的なフィードバックでデモをしようとしています。ドラッグ可能な要素はドロップ可能な要素にドロップする必要があります。 これは、挿入されたjqueryとjquery-uiスクリプトと完全に機能します。

私の質問：

私は（dragenterイベントまたはdragoverイベントがありませんオプションのthatsので、エッジ内でサポートされていません）このオブジェクト上のMouseEnterとmouseleaveを追加することにより、視覚的なフィードバックを追加します。 私はイメージをドラッグしているので、ドロップ可能な要素はマウスイベントを発生させません。

ドロップ可能オブジェクトにマウスを表示させ、ドロップしても機能するようにするにはどうすればよいですか？

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

Answer 1

のjQuery-UIのdraggablesは、あなたが使用することができますoverとoutイベント持っありがとう：ここ

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

は一例です： https://jsfiddle.net/5jtoawp8/

詳しい情報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> 

おかげで... :)