1

これに対する答えを探しましたが、見つかりませんでした...誰かが私を助けてくれることを願っています。円（正方形ではなく）に含まれるドラッグ可能なdiv（jquery uiを使用）を作成しようとしています。現在、親divにリンクされた包含設定がありますが、何を試しても...親の正方形divの隅にドラッグ可能な要素を許可します。親divのborder-radiusを、正方形ではなく円形になるように設定しようとしました(ただし、これはCSSの問題であり、実際のdivの形状には影響しません)。ドラッグ可能な div を円に制限する方法を知っている人はいますか? ありがとう、アンディ

var containment_radius = 50;

$(this.dragobject).draggable({ 
    drag: function() {
        var position = $(this.dragobject).position();
        var result = limit(position.left, position.top, containment_radius, containment_radius);
        if (!result.limit) {
            $(this.dragobject).x = result.x + "px";
            $(this.dragobject).y = result.y + "px";
        }
        console.log(result);
    } 
});

function limit(x, y, x1, y1) {
    var dist = distance([x, y], [x1, y1]);
    if (dist <= containment_radius) {
        return {x: x, y: y};
    } else {
        return {limit: true};
    }
}

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));
}
4

3 に答える 3

0

イベントを使用して制約する方法を示すこの回答を参照してください。これは、イベント ハンドラー内の変数dragを更新することによって行われます。ui.positiondrag

于 2013-04-21T16:11:39.197 に答える