我有两个并排的正方形(div)。当您在一个项目内部拖动一个项目时,我希望它仅限于该项目,但是,如果您将鼠标光标移出该项目并进入下一个方 block ,我希望该元素从第一个方 block 弹出并进入第二个方 block 并仅限于第二个(如果您在拖动鼠标时再次将鼠标移回第一个,则反之亦然)。但是,元素在任何时候都不应该与正方形重叠(它应该完全位于其中一个或另一个的内部)。我怎样才能做到这一点?我正在使用 jQuery UI。
最佳答案
无法让 jQuery UI 执行此操作,但是可以使用 Vanilla JavaScript 执行此操作
http://jsfiddle.net/cmcculloh/676fr/
var dragging = false;
var lastE;
$('#t1').mousedown(function(e){
dragging = true;
});
$('body').mousemove(function(e){
lastE = e;
}).mouseup(function(e){
dragging = false;
});
var placeT = function placeT(e) {
var newX = Math.round((e.pageX - 2)/20) * 20;
var newY = Math.round((e.pageY - 2)/20) * 20;
if(newX <= 100){
$('#t1').offset({ left: newX });
}else if(newX >= 220 && newX <= 300){
$('#t1').offset({ left: newX });
}else{
}
$('#t1').offset({ top: newY });
}
var drag = function drag() {
if(dragging){
placeT(lastE);
}
window.setTimeout(drag, 1);
};
window.setTimeout(drag, 100);
关于javascript - 限制 jQueryUI 拖动到元素,但允许从一个元素移动到另一个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23644165/