[英]jQueryUI drop on target closest to mouse
我正在使用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提供了另一個庫,它提供了我正在尋找的確切功能(“重疊”公差模式),但不幸的是,該庫似乎只適用於絕對定位的元素,因此我認為它無法在我的作品中使用應用。
我想出了一個解決方案,但它涉及到jQueryUI的易碎鴨子打孔。 有一個內部函數稱為$.ui.intersect
,它確定是否可以將可拖動對象拖放到可放置對象上。 還有一個$.ui.ddmanager.droppables
集合,其中包含頁面上所有可放置對象的列表。 我覆蓋了intersect
函數以支持“ touch-closest-to-mouse” toleranceMode,它找到與鼠標最接近的可放置對象,並且僅在當前可放置對象最接近時才返回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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.