Javascript jQueryUI落在离鼠标最近的目标上
我使用的是jQueryUI的可拖动和可拖放交互,在我的应用程序中,我只希望允许将可拖动的拖放到单个拖放目标中,理想情况下是最靠近鼠标的目标,或者与可拖动目标重叠最多的目标。问题是,我的投掷目标有时可能很近,而且很可能一个可拖动目标会重叠多个投掷目标。当我的DragTable与多个放置目标重叠时,我希望只在其中一个放置目标上设置hoverClass,并且只允许在该目标上放置。这对jQueryUI有可能吗 我喜欢“触摸”容忍的行为,所以如果可能的话,我希望保持这种容忍。下面是一个JSFIDLE,它演示了我试图解决的问题:Javascript jQueryUI落在离鼠标最近的目标上,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我使用的是jQueryUI的可拖动和可拖放交互,在我的应用程序中,我只希望允许将可拖动的拖放到单个拖放目标中,理想情况下是最靠近鼠标的目标,或者与可拖动目标重叠最多的目标。问题是,我的投掷目标有时可能很近,而且很可能一个可拖动目标会重叠多个投掷目标。当我的DragTable与多个放置目标重叠时,我希望只在其中一个放置目标上设置hoverClass,并且只允许在该目标上放置。这对jQueryUI有可能吗 我喜欢“触摸”容忍的行为,所以如果可能的话,我希望保持这种容忍。下面是一个JSFIDLE,它演
还有另一个库提供了我正在寻找的重叠公差模式的确切功能,但不幸的是,该库似乎只适用于绝对定位元素,因此我认为它在我的应用程序中不起作用。我想出了一个解决方案,但它涉及到jQueryUI的脆弱鸭形冲压。有一个名为$.ui.intersect的内部函数,用于确定是否可以将可拖放文件拖放到可拖放文件上。还有一个$.ui.ddmanager.droppables集合,其中包含页面上所有droppables的列表。我重写了intersect函数,以支持“触摸最接近鼠标”容差模式,该模式查找最接近鼠标的可拖放项,并且仅当当前可拖放项最接近时才返回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。下面是一个JSFIDLE,其中包含了有效的解决方案:
我想出了一个解决方案,但它涉及到脆弱的jQueryUI鸭子打孔。有一个名为$.ui.intersect的内部函数,用于确定是否可以将可拖放文件拖放到可拖放文件上。还有一个$.ui.ddmanager.droppables集合,其中包含页面上所有droppables的列表。我重写了intersect函数,以支持“触摸最接近鼠标”容差模式,该模式查找最接近鼠标的可拖放项,并且仅当当前可拖放项最接近时才返回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。下面是一个JSFIDLE,其中包含了有效的解决方案:
你可以使用position.top来显示你的拖动元素,你可以突出显示最接近的一个。这个简单的想法你可以尝试一下。这个技巧是以某种方式访问我的拖动表下面的其他放置目标,以确定哪一个是最接近的。jQueryUI似乎没有公开放置目标的列表。我没有收到您的评论Marc.droppable.each将为您提供完整的列表。如果您给了我一个想法,我可以使用我的hoverClass访问当前放置在我的draggable下的所有放置目标。我现在有了识别最近的投放目标的工作代码,接下来我只需要找出如何停用不是最近的投放目标。我快到了!谢谢。你可以对你的拖拽元素使用position.top,你可以突出显示最近的一个。这个简单的想法你可以尝试一下。这个技巧是以某种方式访问我的拖拽表下面的其他拖拽目标,以确定哪一个是最近的。jQueryUI似乎没有公开放置目标的列表。我没有收到您的评论Marc.droppable.each将为您提供完整的列表。如果您给了我一个想法,我可以使用我的hoverClass访问当前放置在我的draggable下的所有放置目标。我现在有了识别最近的投放目标的工作代码,接下来我只需要找出如何停用不是最近的投放目标。我快到了!非常感谢。