Jquery可拖动循环包含

我已经找到了这个问题的答案，但是找不到。。。希望有人能帮我。我试图创建一个可拖动的div（使用jqueryui），它包含在一个圆（而不是一个正方形）中。现在，我已经将包容设置链接到它的父div，但是不管我怎么做。。。它仍然允许将可拖动元素拖入父方div的角中。我尝试设置父div的边界半径，使其为圆形而不是方形（但这可能只是css的事情，而不会影响实际的div形状）。有人知道如何将可拖动div约束到圆上吗？ 谢谢 安迪

var安全壳半径=50；
$（this.dragobject）.draggable（{
拖动：函数（）{
var position=$（this.dragobject.position（）；
var结果=极限（位置.左侧，位置.顶部，安全壳半径，安全壳半径）；
如果（！result.limit）{
$（this.dragobject）.x=result.x+“px”；
$（this.dragobject）.y=result.y+“px”；
}
控制台日志（结果）；
} 
});
功能极限（x，y，x1，y1）{
var dist=距离（[x，y]，[x1，y1]）；
如果（dist查看哪个显示如何使用
drag
事件进行约束。这是通过更新
drag
事件处理程序中的
ui.position
变量来完成的。
查看哪个显示如何使用
drag
事件进行约束。这是通过更新
drag事件处理程序中的
ui.position
变量来完成的事件处理程序。
Duopixel回答了这个确切的问题，给出了一个包含在圆圈中的示例，而不是andyopayne在这里建议的波浪


下面是一个例子

诀窍是计算初始和当前拖曳位置坐标的距离，使用

Math.sqrt（Math.pow（x1-x2，2）+Math.pow（y1-y2，2））；

然后用

x:Math.cos（弧度）*canvas.radius+canvas.center[0]，
y:Math.sin（弧度）*canvas.radius+canvas.center[1]

在对drag的回调中：
Duopixel回答了这个确切的问题，并给出了一个圆圈的例子，而不是andyopayne在这里建议的波浪


下面是一个例子

诀窍是计算初始和当前拖曳位置坐标的距离，使用

Math.sqrt（Math.pow（x1-x2，2）+Math.pow（y1-y2，2））；

然后用

x:Math.cos（弧度）*canvas.radius+canvas.center[0]，
y:Math.sin（弧度）*canvas.radius+canvas.center[1]

在drag回调中：
此解决方案遵循Luke H更新ui.position的建议。实现起来很简单（无需扩展stock Dragable小部件），但我不喜欢它，因为半径必须从Dragable外部访问，而不是从容器本身获取

var radius = 128;
$('.color-picker-map-selector').draggable({
    containment: '.map',
    drag: function( event, ui ) {
        var x = ui.position.left - radius,
            y = radius - ui.position.top,
            h = Math.sqrt(x*x + y*y);
        if (Math.floor(h) > radius) {
            ui.position.top = radius - Math.round(radius * y / h);
            ui.position.left = Math.round(radius * x / h) + radius;
        }
    }
});

没有必要像许多示例那样使用复杂的数学函数，如正弦和余弦

我的首选解决方案是通过添加一个形状选项（“矩形，圆形”）来扩展小部件，并覆盖内部的_generatePosition函数。它使用容器的宽度和高度来找到中心，如果容器不是正方形，它将把可拖动的约束为椭圆

// add shape option to stock draggable
$.widget( "ui.draggable", $.ui.draggable, {
    options: {
        shape: 'rectangular'
    },
    _generatePosition( event, constrainPosition ) {
        var position = this._super( event, constrainPosition );
        if (this.options.shape != 'circular') return position;
        if ( constrainPosition ) {
            if ( this.containment ) {
                if ( this.relativeContainer ) {
                    co = this.relativeContainer.offset();
                    containment = [
                        this.containment[ 0 ] + co.left,
                        this.containment[ 1 ] + co.top,
                        this.containment[ 2 ] + co.left,
                        this.containment[ 3 ] + co.top
                    ];
                } else {
                    containment = this.containment;
                }
                var xRadius = Math.floor((containment[ 2 ] - containment[ 0 ]) / 2),
                    yRadius = Math.floor((containment[ 3 ] - containment[ 1 ]) / 2),
                    x = position.left - xRadius,
                    y = yRadius - position.top,
                    h = Math.sqrt(x*x + y*y);
                if (Math.floor(h) > Math.min(xRadius, yRadius)) {
                    var ye = Math.round(yRadius * y / h),
                    xe = Math.round(xRadius * x / h);
                    if ((Math.abs(y) > Math.abs(ye)) || (Math.abs(x) > Math.abs(xe))) {
                        position.left = xe + xRadius;
                        position.top = yRadius - ye;
                    }
                }
            }
        }
        return position;
    }
});

如果jQuery UI人员更改_generatePosition的名称和用法，会有一些小问题，但是如果他们更改函数的内部结构，使其调用一些辅助函数，例如_constraint（），这将大大简化此代码，那就太好了

还请注意，此解决方案不适用于网格对齐，但只需少量额外的代码即可完成

干杯！
此解决方案遵循Luke H关于更新ui.position的建议。它很容易实现（无需扩展stock Dragable小部件），但我不喜欢它，因为半径必须从Dragable外部访问，而不是从容器本身获取

var radius = 128;
$('.color-picker-map-selector').draggable({
    containment: '.map',
    drag: function( event, ui ) {
        var x = ui.position.left - radius,
            y = radius - ui.position.top,
            h = Math.sqrt(x*x + y*y);
        if (Math.floor(h) > radius) {
            ui.position.top = radius - Math.round(radius * y / h);
            ui.position.left = Math.round(radius * x / h) + radius;
        }
    }
});

没有必要像许多示例那样使用复杂的数学函数，如正弦和余弦

我的首选解决方案是通过添加一个形状选项（“矩形，圆形”）来扩展小部件，并覆盖内部的_generatePosition函数。它使用容器的宽度和高度来找到中心，如果容器不是正方形，它将把可拖动的约束为椭圆

// add shape option to stock draggable
$.widget( "ui.draggable", $.ui.draggable, {
    options: {
        shape: 'rectangular'
    },
    _generatePosition( event, constrainPosition ) {
        var position = this._super( event, constrainPosition );
        if (this.options.shape != 'circular') return position;
        if ( constrainPosition ) {
            if ( this.containment ) {
                if ( this.relativeContainer ) {
                    co = this.relativeContainer.offset();
                    containment = [
                        this.containment[ 0 ] + co.left,
                        this.containment[ 1 ] + co.top,
                        this.containment[ 2 ] + co.left,
                        this.containment[ 3 ] + co.top
                    ];
                } else {
                    containment = this.containment;
                }
                var xRadius = Math.floor((containment[ 2 ] - containment[ 0 ]) / 2),
                    yRadius = Math.floor((containment[ 3 ] - containment[ 1 ]) / 2),
                    x = position.left - xRadius,
                    y = yRadius - position.top,
                    h = Math.sqrt(x*x + y*y);
                if (Math.floor(h) > Math.min(xRadius, yRadius)) {
                    var ye = Math.round(yRadius * y / h),
                    xe = Math.round(xRadius * x / h);
                    if ((Math.abs(y) > Math.abs(ye)) || (Math.abs(x) > Math.abs(xe))) {
                        position.left = xe + xRadius;
                        position.top = yRadius - ye;
                    }
                }
            }
        }
        return position;
    }
});

如果jQuery UI人员更改_generatePosition的名称和用法，会有一些小问题，但是如果他们更改函数的内部结构，使其调用一些辅助函数，例如_constraint（），这将大大简化此代码，那就太好了

还请注意，此解决方案不适用于网格对齐，但只需少量额外的代码即可完成

干杯！
你必须抓住光标的位置，自己计算。好的。谢谢。我很害怕。我会试一试，但如果有人有一个简短的例子，我会非常感激。这个线程可能会起作用。因此，我已经拼凑了这段代码。当我检查日志结果时，当它超出范围时，它似乎会报告为真e圆形容器，或容器内的x，y位置…但可拖动对象的位置从未更新…这意味着它仍然可以拖动到圆形容器外。想法？你必须抓住光标位置，自己进行计算。好的。谢谢。我很害怕。我会尝试一下，但如果有的话e有一个简短的例子，非常感谢。这个线程可能会起到作用。所以，我把这段代码拼凑在一起。当我检查日志结果时，当它位于圆形容器外部时，它似乎报告为真，或者当它位于容器内部时，它报告为x，y位置…但是可拖动对象的位置永远不会更新…这意味着仍然可以被拒绝