使用鼠标拖拽边缘动画来触发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>

谢谢... ：）