Question

我正在尝试使用jQuery在面板之间实现简单的图像拖放。在拖动时，我创建了一个缩放图像，我将其放置在鼠标下方。这一部分都可以工作，但由于鼠标现在总是有缩略图，我不会在下面的放置目标面板上获得mouseenter / leave。我希望在拖动过程中使用这些事件突出显示放置目标面板。

有没有我可以让缩略图不掩盖这些事件？还有什么我可以尝试让这个工作？

（我不想在这种情况下使用jQueryUI，因为我不需要它用于任何其他东西而且它似乎有点矫枉过正。而且，这对我来说是一个学习练习，所以我想了解选项:)。

Answer 1

你能不能只是将缩略图偏移放在鼠标上，而不是放在它下面？这样就不会模糊你的鼠标事件。或者您可以获取该元素，并检查它何时进入另一个元素边界？

Answer 2

一个选项是跟踪鼠标在文档中的移动，并检查光标是否在您在页面中关注的任何元素的范围内。您不会获得单个元素的鼠标事件，但您可以手动跟踪鼠标经过的最后一个元素，并确定如果使用释放鼠标按钮（在文档上向上鼠标），该如何处理它。

大致像

var last_element = null;

function document_mousemove (e) {

    last_element = null;

    for each el in array_of_important_elements {

        if ( mouse position in el bounds ) {
            last_element = el;
        }
    }
}

function document_mouseup (e) {
    if (last_element != null) {
        // do your drop logic here
    }
}

这假设您不会有重叠的元素，这两个元素都被认为是丢弃。如果是这种情况，你会想要跟踪它们并确定如何继续下降。

拖动图像时，底层对象上的jQuery鼠标事件

2 个答案: