8

ウィンドウのサイズに基づいてスケールを変更する div に含まれるドラッグ可能な要素を作成する方法を誰かが理解するのを手伝ってくれたら、どんなガイダンスも本当にありがたいです。

私が行った場合：

element.draggable({ 
    cursor: "move",
    containment: '#container'
});

何が起こるかというと、コンテナの通常サイズの封じ込めができるということです。したがって、 がある場合transform: scale(1.5)、ドラッグ可能な要素が移動できないコンテナ内のスペースができます。

私も試してみましcontainment: 'parent'たが、それは非常にグリッチです。

編集

上と左のコンテインメントを取得する方法はわかりましたが、右と下を取得する方法がわかりません。

var containmentArea = $("#container");

containment:  [containmentArea.offset().left, containmentArea.offset().top, ???, ???]

幅と高さを試してみましcontainmentArea[0].getBoundingClientRect()たが、それも正しい動きではないようです。

これは、いくつかのサンプルコードの jsfiddle です。

4

3 に答える 3

6

コンテインメントを使用せずに、ドラッグ イベントで座標をリセットするバージョン (スケール変換のために既に再計算されているため):

var percent = 1, containmentArea = $("#container");

function dragFix(event, ui) {
    var contWidth = containmentArea.width(), contHeight = containmentArea.height();
    ui.position.left = Math.max(0, Math.min(ui.position.left / percent , contWidth - ui.helper.width()));
    ui.position.top = Math.max(0, Math.min(ui.position.top  / percent,  contHeight- ui.helper.height()));
}

$(".draggable").draggable({
    cursor: "move",
    drag: dragFix,
});

//scaling here (where the percent variable is set too)

フィドル

コンテナの幅と高さの例では、dragevent 内で取得されます。パフォーマンスを向上させるために、スケーリング時にそれらを格納することもできます。イベント内で計算することにより、再スケーリング後も機能しますが、パーセント変数を設定する必要があります。真に一般的なものにするために、イベント内でも取得できます (固定コンテナーの代わりに、ui.helper.parent() を使用できます) dragevent 内のオフセットは (0,0) であるため、コンテナー (少なくとも現在のセットアップ用です)、開始オフセットに単純化originalleft + (position - originalposition)/percentする自由を取りましたposition / percent が、もはや必要ではないように思われたため、フィドルに残しましたが、必要に応じて再度追加できます。

于 2015-07-13T14:58:44.760 に答える
0

これを見てください：

http://jsfiddle.net/z0gqy9w2/3/

編集されたコードは次のとおりです。

    // Matrix regex to take the scale value property of $('#container') element    
    var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/,
    matches = $('#container').css('transform').match(matrixRegex);
    // Matches have this value : ["matrix(1.5, 0, 0, 1.5, 0, 0)", "1.5", "1.5"] , so we need matches[1] value :
    var scaleValue = matches[1];
    $(".draggable").draggable({
        cursor: "move",
        start: startFix,
        drag: dragFix,
        containment: [containmentArea.offset().left, containmentArea.offset().top, 
                      ( ( containmentArea.offset().left + ( containmentArea.width() * scaleValue ) ) - ( $(".draggable").width() * scaleValue ) ) ,
                      ( ( containmentArea.offset().top + ( containmentArea.height() * scaleValue ) ) - ( $(".draggable").height()  * scaleValue ) ) ]

    });

ご覧のとおり、ここにトリックがあります：

( ( containmentArea.offset().left + ( containmentArea.width() * scaleValue ) ) - ( $(".draggable").width() * scaleValue ) )

あなたの右の最大位置は次のようになります：メインコンテナの左オフセット+コンテナの真の幅（スケール付き）-アイテムの真の幅（コンテナ内に入れるため）。

(ヒント: 結果を見たい場合は、「パーセント」var 値を自由に変更してください)

正規表現参照

于 2015-07-12T19:00:49.063 に答える