2

別の div 'box' 親コンテナー内に div 'slide' 要素があり、子に JQuery Draggable を適用しました。アイテムがドラッグされている間、親コンテナーのサイズを変更し、縮小したり、拡大したりします。

問題は、JQuery がこのサイズ変更に応答せず、ドラッグされた要素が現在のサイズではなく、親の元のサイズ内にまだ含まれていることです。マウスアップまで - 次のドラッグ セッションでは新しいサイズが使用されます (再度変更されるまで)。 ）。

これを解決するために、JQuery が新しいコンテナー サイズを使用するように、mouseup イベントに続いて mousedown イベントをトリガーすることを望んでいました。

$('.slide').draggable({ axis: "x", containment: 'parent',
                    drag: function (e, ui) {
                        resizeContainer();

                        if (outsideContainer()){

                        // Try to stop and restart dragging
                            $(this).trigger('mouseup');
                            $(this).trigger('mousedown');
                        }
                    }

ただし、これは例外をスローします...

Unable to get value of the property '0': object is null or undefined

...JQuery コードの次の行:

this.helper[0].style.left=this.position.left+"px";

a) Draggable を親の寸法の変更にリアルタイムで応答させる方法、または b) ドラッグストップをトリガーしてシームレスにドラッグする方法を知っている人はいますか?

ありがとう。

4

1 に答える 1

3

@Fijjit、私が正しく理解していればresizeContainer、ドラッグされた要素に境界を適用する前にアルゴリズムを実装するカスタム「封じ込め」関数が必要です。

以下のコードでは、

  • 標準draggable containmentオプションは省略
  • resizeContainerdraggable dragイベントハンドラとしてアタッチされます
  • resizeContainer二重目的です。(a) サイズ変更アルゴリズムを実行し、(b) カスタム封じ込めアルゴリズムを適用します。

JavaScript:

$(function(){
    var $container = $("#myContainer");

    function resizeContainer(e, ui) {
        //implement container resize algorithm here
        var w1 = ui.helper.outerWidth(),
            w2 = $container.width();
        ui.position.left = Math.max(Math.min(ui.position.left, w2 - w1), 0);
    }

    $("#draggable").draggable({
        axis: "x",
        drag: resizeContainer
    });
});

フィドルのデモを見る

于 2012-05-05T01:28:36.847 に答える