火焰mouseenter / mouseleave事件，在边缘动画中拖放

Question

我试图通过视觉反馈制作演示。必须将可拖动元素放在可放置元素上。 这与插入的jquery和jquery-ui脚本完美配合。

我的问题：

我想通过在此对象上添加mouseenter和mouseleave来添加视觉反馈（在边缘内不支持dragenter或dragover，因此没有选项）。 因为我拖动图像，所以droppable元素不会触发鼠标事件，因为它们之间只有一个图像。

如何让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>

谢谢...：）