使用Jquery Draggable Div在拖动期间设置位置

Question

我一直在研究一个脚本,它将可拖动div的限制限制为一个圆圈(而不是一个矩形的父div).我找到了这个主题:如何约束圆圈区域内的运动,这似乎解决了我的一些问题.我已经有了适当的函数,当我在drag函数中调用这些函数时,它将返回div的正确x和y位置.我知道这是因为我可以在拖动功能期间检查控制台日志并检查div的位置.但是,我的问题是我似乎无法在拖动事件期间设置实际位置.控制台报告正确的位置值,但div实际上从未被约束到圆形边界.例如,如果我将div拖动到圆的中心,然后将其垂直向上移过圆边界... div不会停在圆圈处,但是控制台会将位置固定到[0,50]// 50是X和Y轴上圆的中心.我读了一些其他线程,我可能不得不使用一个帮助器对象,但我似乎没有使用这种方法.我发布了一个简化的例子,希望有人可以提供帮助.谢谢.

this.light = document.createElement("div");
this.light.style.position='absolute';
this.light.style.left="20px";
this.light.style.top="40px";
this.light.style.width="20px";
this.light.style.height="20px";

$(parentdiv).append(this.light);

var circle_cenx = 50.0;
var circle_ceny = 50.0;
var circle_radius = 50.0;

$(this.light).draggable({ 
    drag: function( event, ui ){
        var position = $(that.light).position();
        var result = limit(position.left+10, position.top+10, circle_cenx, circle_ceny);
        $(that.light).css({'top': result.y, 'left': result.x});
        position = $(that.light).position();
        console.log(position);
    }
});

function limit(x, y, cenx, ceny) {
    var dist = distance([x, y], [cenx, ceny]);
    if (dist <= circle_radius) {
        return {x: x, y: y};
    } 
    else {
        x = x - circle_cenx;
        y = y - circle_ceny;
        var radians = Math.atan2(y, x);
        return {
           x: Math.cos(radians) * circle_cenx + circle_radius,
           y: Math.sin(radians) * circle_ceny + circle_radius
        }
    } 
}

function distance(dot1, dot2) {
    var x1 = dot1[0],
        y1 = dot1[1],
        x2 = dot2[0],
        y2 = dot2[1];
    return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
}

Answer 1

是的,我终于搞清楚了.我原以为.position是一个只读属性......但事实证明你也可以用它来设置位置.因此,在上面的代码中,我正在创建一个名为result的变量,并存储来自limit函数的返回值(它返回包含在封闭圆圈内的鼠标的x和y值).所以,之后你只需要这样称呼:

ui.position={'top': result.y-10, 'left': result.x-10};

你需要删除该行:

$(that.light).css({'top': result.y, 'left': result.x});

这应该是你所需要的.希望这可以帮助.