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;
}

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

1 个答案: