2

私は、ドラッグ可能なdivの包含を（長方形の親divではなく）円に制限するスクリプトに取り組んできました。私はこのスレッドを見つけました：円の領域内の動きを制限する方法それは私の質問のいくつかを解決したようでした。適切な関数を配置しました。ドラッグ関数内でこれらの関数を呼び出すと、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));
}
4

3 に答える 3

5

はい、やっとわかりました。.position は読み取り専用のプロパティだと思っていましたが、それを使用して位置を設定することもできます。したがって、上記のコードでは、result という変数を作成し、limit 関数からの戻り値を格納しています (この関数は、格納円内でキャップされたマウスの x 値と y 値を返します)。したがって、その後はこれを呼び出すだけです：

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

次の行を削除する必要があります。

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

必要なのはこれだけです。お役に立てれば。

于 2013-03-01T00:36:58.483 に答える
0

ドラッグ可能な要素が含まれているかどうかを確認します。うまくいけば、以下のリンクが役に立ちます

http://api.jqueryui.com/draggable/#option-containment

contaiment: [x1, y1, x2, y2];

カーソル位置を取得し、計算を実行して、それに応じて x1、y1、x2、および y2 の値を設定できます。

于 2013-02-12T12:03:59.133 に答える