包含可拖动的圆到更大的圆

Containing draggable circle to a larger circle

本文关键字：包含可 拖动      更新时间：2023-09-26

我真的很难解决这个问题，我需要使用javascript将一个小圆圈限制在一个大圆圈的范围内。

示例如下：http://jsfiddle.net/z9vqLnsL/1/

$（函数（）{$（"#draggable"）.traggable({containment:"#containmentwrapper"，start:函数（）｛

    },
    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值，如果圆圈被拖到外面，但它真的很跳跃，不能顺利工作。

请帮忙吗？

更新：通过以上操作，我设法将圆保持在边界内，但它停止了拖动动作。

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

$(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。

顺便说一句，这不是超级灵活的，如果需要将大圆更改为任意形状，那么处理好任意情况是相当复杂的。

相关文章：