Question

我有一个可以使用Jquery UI拖动的div。现在你可以在父级内部来回点击并拖动div，问题是我还需要能够点击父级中的某个位置并让div自动拖动到该位置并启动拖动事件，如果用户决定继续从该位置移动鼠标。我只是想知道这是否可行。

这是我目前所拥有的JSFiddle：http://jsfiddle.net/ky2xLskx/

$( "#handle" ).draggable({ containment:"parent" });

为了尽可能简单，红框需要像页面的滚动条一样。

Answer 1

是的，这可能是您想要实现的。您可以检查父容器上的click事件，并将该框设置为该特定位置的动画。

$( "#handle" ).parent().click(function(e){

    var w = $( "#handle" ).width();
    var w2 = w/2;
    var mx = e.clientX;
    var my = e.clientY;
    var dx = $(this).offset().left;
    var lx = $(this).width()+dx;
    var posX=mx-dx-w2;
    if((mx-dx)<w){
         posX = 0;
    }
    if((lx-mx)<w){
         posX =$(this).width()-w;
    }
    $( "#handle" ).animate({left:posX+'px'},500);
});

这里是jsfiddle

Jquery拖动框到鼠标单击位置

1 个答案: