如何在拖动另一个元素时在鼠标光标下获取元素

How to get element under mouse cursor while dragging another element?

本文关键字：元素 光标 获取 鼠标 拖动 另一个      更新时间：2023-09-26

我在谷歌上搜索了几个答案，但它们都是关于点击或鼠标移动事件的，不适合我的问题。

基本上，我允许用户从列表中拖动一个项目，然后将其放在另一个列表中的文件夹中，并且每当项目在其上拖动时，我都希望突出显示（文件夹列表中的）元素。在文件夹列表上听mouseenter和mouseleave事件是不起作用的。我尝试在拖动事件中使用document.elementFromPoint（jQuery UI的可拖动拖动），但不幸的是，它返回的是helper元素，而不是文件夹列表中的元素。我认为这是正确的行为，因为document.elementFromPoint返回鼠标光标下最顶部的元素。但这并不能解决我的问题：（.

    $("#filelist li").draggable({
        helper: "clone",
        drag: function (event, ui) {
            console.log(event.pageX, event.pageY);
            var element = document.elementFromPoint(event.pageX, event.pageY);
            // element is helper element, instead of actual element under cursor which I want.
        }
    });
    $("#folderlist").droppable({
        drop: function (event, ui) {
        }
    });
    // These mouse events won't be triggered while dragging an item.
    $("#folderlist").on({
        "mouseenter": function (event) {
            this.style.backgroundColor = "#1c70cf";
        },
        "mouseleave": function (event) {
            this.style.backgroundColor = "";
        }
    }, "li");

显然，dropable有一个悬停函数。http://jqueryui.com/droppable/#visual-反馈

$("#folderlist").droppable({
    hoverClass: "ui-state-hover",
    drop: function (event, ui) {
    }
});

然后将其添加到您的css中：

.ui-state-hover
{
    background-color: #1c70cf;
}
相关文章：