使用鼠標拖拽邊緣動畫來觸發mouseenter / mouseleave事件

Question

我正在嘗試通過視覺反饋進行演示。 必須將可拖動元素拖放到可拖放元素上。 這與插入的jquery和jquery-ui腳本完美配合。

我的問題：

我想通過在該對象上添加mouseenter和mouseleave來添加視覺反饋（邊緣不支持dragerer或dragover，因此沒有選擇）。 因為我正在拖動圖像，所以droppable元素不會觸發鼠標事件，因為它們之間只是一個圖像。

如何使可放置對象看到鼠標並在放置后仍能正常工作？

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的可拖動對象具有可以使用的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/

在文檔中有更多信息。

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>

謝謝... ：）