Javascript Jquery将框拖动到鼠标单击位置

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

以下是我目前拥有的一部分：

---

尽可能简单地说，红色框需要像页面的滚动条一样工作。

是的，这可能是您想要实现的。您可以选中父容器上的“单击”事件，并将框设置为该特定位置的动画

$( "#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);
});

$（“#句柄”）.parent（）。单击（函数（e）{
var w=$（“#句柄”）.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；
如果（（mx-dx）
$( "#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);
});