Question

我有两个正方形（div）并排。当你在一个内部拖动一个项目时，我希望它仅限于那一个，但是，如果你将鼠标光标移出它并进入下一个方格，我希望元素从第一个方块弹出到第二个方格并限制在第二个（反之亦然，如果你在拖动时再次将鼠标移回第一个）。但是，元素在任何时候都不应该与正方形重叠（它应该完全始终在任何一个或另一个内部）。我怎样才能做到这一点？我正在使用jQuery UI。

http://jsbin.com/gecucotu/1/edit?js,output

Answer 1

无法获得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);

限制jQueryUI拖动到元素，但允许从元素移动到元素？

1 个答案: