边动画中拖放的Fire mouseenter / mouseleave事件

Question

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

我的问题是：

我想通过在这个对象上添加一个鼠标输入器和鼠标左键来添加一个视觉反馈(边中不支持拖拽或拖拽，所以没有选项)。因为我正在拖动一个图像，所以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>

​

​

​

​

谢谢..。:)