jQueryUI 放在离鼠标最近的目标上答案

【问题标题】：jQueryUI drop on target closest to mousejQueryUI 放在离鼠标最近的目标上
【发布时间】：2014-02-11 03:56:09
【问题描述】：

我正在使用 jQueryUI 的可拖动和可放置交互，在我的应用程序中，我只想允许将可拖动对象放置到单个放置目标中，理想情况下是离鼠标最近的目标，或者最靠近鼠标的目标与可拖动的重叠。问题是我的放置目标有时会靠得很近，并且一个可拖动对象很可能会重叠多个放置目标。当我的可拖动对象与多个放置目标重叠时，我想仅在其中一个放置目标上设置 hoverClass，并且只允许放置在该目标上。 jQueryUI 可以做到这一点吗？

我喜欢“触摸”容差的行为，所以如果可能的话，我想保留它。这是一个 jsfiddle，它演示了我要解决的问题： http://jsfiddle.net/gDkAQ/2/

$('.draggable').draggable();

$('.droppable').droppable({
    tolerance: 'touch',
    hoverClass: 'drop-acceptable',
    drop: function(event, ui) {
        $(this).css({ 'background-color': '#00f' });
    }
});

ThreeDubMedia 的另一个库提供了我正在寻找的确切功能（“重叠”容差模式），但不幸的是，该库似乎只适用于绝对定位的元素，所以我不认为它可以在我的应用程序中使用。

【问题讨论】：

您可以对拖动元素使用 position().top 并突出显示最接近的元素，这个简单的想法可以尝试
诀窍是以某种方式访问我的可拖动对象下方的“其他”放置目标，以确定其中哪个最接近。 jQueryUI 似乎没有公开放置目标的列表。
我没有收到你的评论 Marc (".droppable").each() 会给你完整的列表
你给了我一个想法，我可以使用我的 hoverClass 访问当前在我的可拖动对象下的所有放置目标。我现在有了识别最近放置目标的工作代码，接下来我只需要弄清楚如何停用不是最近的放置目标。快到了！谢谢。

标签： javascript jquery jquery-ui

【解决方案1】：

我想出了一个解决方案，但它涉及到 jQueryUI 的脆弱的打鸭子。有一个名为$.ui.intersect 的内部函数确定是否可以将可拖动对象拖放到可放置对象上。还有一个 $.ui.ddmanager.droppables 集合，其中包含页面上所有可放置项的列表。我重写了intersect 函数以支持“touch-closest-to-mouse”容差模式，该模式可以找到最接近鼠标的可放置对象，并且仅在当前可放置对象最接近时才返回真。这是我想出的解决方案：

(function () {
    var defaultIntersect = $.ui.intersect;
    var cursorX, cursorY;

    $(document).mousemove(function (e) {
        cursorX = e.pageX;
        cursorY = e.pageY;
    });

    $.ui.intersect = function (draggable, droppable, toleranceMode) {
        if (toleranceMode !== 'touch-closest-to-mouse') {
            return defaultIntersect(draggable, droppable, toleranceMode);
        }
        if (!defaultIntersect(draggable, droppable, 'touch')) {
            return false;
        }
        var acceptable = _.filter($.ui.ddmanager.droppables.default, function (d) {
            return defaultIntersect(draggable, d, 'touch');
        });
        var closest = _.min(acceptable, function (other) {
            var otherCenterX = other.offset.left + other.proportions().width / 2;
            var otherCenterY = other.offset.top + other.proportions().height / 2;
            return Math.sqrt(Math.pow(otherCenterX - cursorX, 2) + Math.pow(otherCenterY - cursorY, 2));
        });
        return droppable === closest;
    };

    $('.draggable').draggable();

    $('.droppable').droppable({
        tolerance: 'touch-closest-to-mouse',
        hoverClass: 'drop-acceptable',
        drop: function (event, ui) {
            $(event.target).css({
                'background-color': '#0f0'
            });
        }
    });
})();

这适用于 jQueryUI 1.10.4。这是一个带有工作解决方案的jsfiddle： http://jsfiddle.net/gDkAQ/12/

【讨论】：