当拖动一个元素时如何获取鼠标光标下的元素？

Question

我在Google上搜索了几个答案，但它们都涉及到点击或移动鼠标的事件，这与我的问题不适用。基本上，我允许用户从一个列表中拖拽一个项目并将其放置在另一个列表中的文件夹中，我想要在拖动项经过时高亮显示该元素（在文件夹列表中）。在文件夹列表上监听mouseenter和mouseleave事件不起作用。我尝试使用拖动事件（jQuery UI的Draggable drag）中的document.elementFromPoint，但不幸的是它返回的是辅助元素而不是文件夹列表中的元素。我认为这是正确的行为，因为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");

- Tien Do

---

#folderlist是什么？你可以使用dragover/dragleave事件。 - Luizgrs

@Luizgrs 我想我说过我希望突出显示文件夹列表中的项目，而不是文件夹列表元素本身。当鼠标进入/离开可放置目标时，会触发这些事件。 - Tien Do

Answer 1

显然，可放置对象具有悬停功能。http://jqueryui.com/droppable/#visual-feedback

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

然后将此添加到您的CSS中：

.ui-state-hover
{
    background-color: #1c70cf;
}

- Flipke

---

你可以使用 over事件处理程序进一步细化控制。不过缺点是无论哪种情况，都需要将#folderlist li设置为可拖放的，而不是#folderlist本身。 - blgt

@Flipke 我想要突出显示 LIs，而不是 UL（一个可放置的目标）。如果我让 LIs 可以被放置，这也不是问题。 - Tien Do

那么问题就解决了，只需要更改为： $("#folderlist li").droppable 而不是 $("#folderlist").droppable - Flipke