时间戳

首页 > 解决方案 > droppable out 事件：如何获取鼠标移动到的元素

jquery-ui - droppable out 事件：如何获取鼠标移动到的元素

问题描述

在可退出事件期间，我需要鼠标光标移动到的元素。如果此元素不可放置，则应执行默认行为。

我尝试了以下方法：

            $(dropSelector).droppable({
            over: function (event, ui) {
                ui.helper.css("cursor", "copy");
                // Some code on drop enter here...
            },
            out: function (event, ui) {
                // New element: mouse pointer might move to another droppable element...
                // How to obtain the element where the mouse moves to?
                if (/* next element is NOT droppable*/) {
                    ui.helper.css("cursor", "no-drop");
                    // Some code on drop out here...
                }
            },
            drop: function (event, ui) {
                // handle drop event
            }
        });

但是，我找不到在out事件期间获取鼠标光标移动到的元素的方法。我试过了event.target，event.currentTarget但它们不是我要寻找的元素。

标签： jquery-uieventsdrag-and-drop

解决方案

我使用了不同的解决方案。显然，over下一个元素的out事件在旧元素的事件之前触发。所以我检查 out 目标是否是最后输入的元素。

    var _target = null;
    $(dropSelector).droppable({
        over: function (event, ui) {
            _target = event.target;
            ui.helper.css("cursor", "copy");
            // Some code on drop enter here...
        },
        out: function (event, ui) {
            if (_target === event.target) {
                // No 'over' occurred for a new element
                ui.helper.css("cursor", "no-drop");
                // Some code on drop out here...
            }
            else {
               // Some code on drop out of old element

               // Perhaps some code on 'over' that has to be done after
               // drop out of old element
            }

        },
        drop: function (event, ui) {
            // handle drop event
        }
    });

但是：我可以依靠over在下一个元素out上触发旧元素之前的事实吗？

推荐阅读