gpt4 book ai didi

javascript - jQueryUI 落在离鼠标最近的目标上

转载 作者:行者123 更新时间:2023-11-29 18:17:34 25 4
gpt4 key购买 nike

我正在使用 jQueryUI 的 draggable 和 droppable 交互,在我的应用程序中我只想允许将 draggable 拖放到单个放置目标中,理想情况下是离鼠标最近的目标,或者具有最多的目标与可拖动对象重叠。问题是我的放置目标有时会靠得很近,并且一个可拖动对象很可能会重叠多个放置目标。当我的可拖动对象与多个放置目标重叠时,我想仅在其中一个放置目标上设置 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它提供了我正在寻找的确切功能(“重叠”容差模式),但不幸的是,该库似乎只适用于绝对定位的元素,所以我认为它不适用于我的应用程序。

最佳答案

我想出了一个解决方案,但它涉及到 jQueryUI 的脆弱鸭子冲压。有一个名为 $.ui.intersect 的内部函数确定是否可以将 draggable 拖放到 droppable 上。还有一个 $.ui.ddmanager.droppables 集合,其中包含页面上所有 droppables 的列表。我覆盖了 intersect 函数以支持“touch-closest-to-mouse” toleranceMode,它找到最接近鼠标的 droppable,并且仅当当前 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/

关于javascript - jQueryUI 落在离鼠标最近的目标上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21692786/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com