Question

我真的很挣扎这个我需要在一个更大的圆圈范围内限制一个小圆圈使用javascript我有它并且我正在取得进展但是非常感谢任何人给我一个手。

$（function（）{ $（ “＃拖动”）。拖动（{ 遏制：“＃containment-wrapper”， start：function（）{

    },
    drag: function (evt) {
        console.log(evt);
        var D = Math.sqrt(Math.pow(($('#containment-wrapper').width() / 2) - evt.clientX, 2) + Math.pow(($('#containment-wrapper').width() / 2) - evt.clientY, 2));
        if (D <= ($('#containment-wrapper').width() / 2)) {
            $('#check').html('inside');
        } else {
            $('#check').html('outside');
            $("#draggable").left(x_last);
            $("#draggable").right(y_last);
        }
    },
    stop: function () {

    }
});

}）;

我已经尝试将圆圈设置为最后的x和y值，如果将圆圈拖到外面但它实际上是跳跃并且不能顺利运行。

请帮忙吗？

更新：通过上面的操作我设法保持圆圈的进入，但它会停止拖动动作。

Answer 1

这样做的一种方法是限制小圆圈坐标距离原点的距离，这里是大圆圈的中心：

$(function () {
    $("#draggable").draggable({
        drag: function (e, ui) {
            var r = $('#containment-wrapper').width()/2;
            var small_r = $('#draggable').width()/2;
            var origin_x = r - small_r;
            var origin_y = r - small_r;
            var x = ui.position.left - origin_x, y = ui.position.top - origin_y;
            var l = Math.sqrt(x*x + y*y);
            var l_in = Math.min(r - small_r, l);
            ui.position = {'left': x/l*l_in + origin_x, 'top': y/l*l_in + origin_y};
        },
    });
});

Fiddle

顺便说一句，这不是超灵活的，如果需要将大圆改成任意形状，处理任意情况都很复杂。

将可拖动的圆圈包含在较大的圆圈中

1 个答案: