在边缘动画中通过拖放触发 mouseenter / mouseleave 事件

Question

我正在尝试制作一个带有视觉反馈的演示。可拖动元素必须放在可放置元素上。 这与插入的 jquery 和 jquery-ui 脚本完美配合。

我的问题：

我想通过在此对象上添加 mouseenter 和 mouseleave 来添加视觉反馈（边缘不支持dragenter 或 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 的 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>

谢谢... :)