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

Question

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

基本上，我允许用户从列表中拖动一个项目并将其放到另一个列表中的文件夹中，并且我想在项目拖过它时突出显示元素(在文件夹列表中)。监听文件夹列表上的 mouseenter 和 mouseleave 事件将不起作用。我尝试在拖动事件(jQuery UI 的 Draggable 拖动)中使用 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");

Answer 1

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

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

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

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