如何在拖动另一个元素的同时获取鼠标光标下的元素？ [英] How to get element under mouse cursor while dragging another element?

问题描述

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

I googled and found several answers but they was all about click or mousemove events which are not suitable for my question.

基本上我允许用户拖动项目列表并将其放在另一个列表中的文件夹上，我想在项目拖动时突出显示元素（在文件夹列表中）。在文件夹列表上收听mouseenter和mouseleave事件将不起作用。我在拖动事件（jQuery UI的Draggable拖动）中尝试使用document.elementFromPoint，但不幸的是它返回了辅助元素而不是文件夹列表中的元素。我认为这是正确的行为，因为document.elementFromPoint返回鼠标光标下最顶层的元素。但它并没有解决我的问题：（。

Basically I allow users to drag an item from a list and drop it on a folder in another list and I want to highlight element (in the folder list) whenever an item is dragging over it. Listening to mouseenter and mouseleave events on the folder list won't work. I tried with document.elementFromPoint in the dragging event (jQuery UI's Draggable drag) but unfortunately it returns the helper element instead of the element in the folder list. I think it's correct behavior since document.elementFromPoint returns the top most element under mouse cursor. But it doesn't solve my problem :(.

    $("#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");

推荐答案

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

Apparently, the droppable has an hover function. http://jqueryui.com/droppable/#visual-feedback

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

然后将此添加到您的css：

Then add this to your css :

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

这篇关于如何在拖动另一个元素的同时获取鼠标光标下的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！