2

ブラウザよりも大きいdivを水平方向にドラッグしますが、左右の端に到達したときにラッパーにスナップするようにします。ドラッグされたdivがその包含よりも大きい場合、ドラッグが適切に機能しないため、「包含」ではそれを行うことができません。

$( "#dragable" ).draggable({ cursor: "e-resize", axis: "x", containment: "document" });

http://jsfiddle.net/xBVYT/320/

このため、「封じ込め」を削除しましたが、ドラッグされたdivがブラウザウィンドウから出てしまいます。

$( "#dragable" ).draggable({ cursor: "e-resize", axis: "x" });

http://jsfiddle.net/xBVYT/325/

どんな助けでも大歓迎です。

4

2 に答える 2

0

ドラッグ イベントを制御することで、ドラッグ可能オブジェクトがマージンからはみ出すのを防ぐことができ ます。

$( "#dragable" ).draggable({
    cursor: "e-resize"
    , axis: "x" 
    , drag: function(event, ui) {
        var $container = $(this).closest(".wrap");
        var container_left = $container.position().left;
        var container_right = $container.position().left + $container.width();
        var drag_left = ui.offset.left;
        var drag_right = ui.offset.left + $(this).width();
        if (drag_left > container_left) {
            return false;
        };
        if (drag_right < container_right) {
            return false;
        };
    }
});
于 2013-02-09T13:40:29.847 に答える
0

APIで似ているのはrevert- http://api.jqueryui.com/draggable/#option-revertまたは同様の方法でjQueryを使用できます.animate()

たとえばドロップ時

wrapX+wrapWidth < draggableX + draggableWこれはwrapEndX < draggableEndX、右端を越えたので、最初の場所に戻すか、他の作業で最後にアニメーション化することになります - 可能な最大値。

左端も同様です。

独自のロジックを記述する必要がありますが、とにかくそうです

于 2013-02-09T02:34:59.433 に答える