Question

我正在使用jQueryUI的可拖动和可放置的交互，并且在我的应用程序中，我只想让拖动器放入单个放置目标，理想情况下是最接近鼠标的目标，或者是最接近鼠标的目标与可拖动的重叠。问题是我的掉落目标有时可能很接近，并且拖拽很可能会重叠多个掉落目标。当我的draggable重叠多个drop target时，我想只在一个drop目标上设置hoverClass，并且只允许该目标上的drop。这可以用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的另一个库提供了我正在寻找的确切功能（“重叠”容差模式），但不幸的是，该库似乎只能使用绝对定位的元素，所以我不喜欢我认为它可以在我的申请中使用。

Answer 1

我提出了一个解决方案，但它涉及jQueryUI的脆弱鸭子冲击。有一个名为$.ui.intersect的内部函数可以确定是否可以将拖动拖放到droppable上。还有一个$.ui.ddmanager.droppables集合，其中包含页面上所有可放置的列表。我重写intersect函数以支持“触摸最接近鼠标”toleranceMode，它找到最接近鼠标的dropable，并且只有当前droppable最接近才返回true。这是我提出的解决方案：

(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/

jQueryUI放在最接近鼠标的目标上

1 个答案: