droppable out事件：如何获取鼠标移至的元素

2024-05-23 • 问答

在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，但它们不是我想要的元素正在寻找。

我使用了不同的解决方案。显然，下一个元素的over事件在旧元素的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之前触发的事实？

droppable out事件：如何获取鼠标移至的元素

smazhe 回答：droppable out事件：如何获取鼠标移至的元素

大家都在问