1

彼の位置が親の位置と同じかそれより高い場合、子divのドラッグを停止しようとしています:

$( ".content" ).draggable({
    axis: "x",
    drag: function( event, ui ) {
        var wrapper = $(".wrapper").offset();
        var pos = ui.helper.offset();
        $(".content").val(pos.left - wrapper.left);
        if ($(".content").val() >= 0){
            $( ".content" ).draggable( "option", "disabled", true );
       }
    }
});

しかし、div はマウスを放したときにのみ停止します。ドラッグ中に停止する必要があります。

解決した

wrapper = $('.wrapper');
content = $('.content');

wrapperWidth = wrapper.width();
contentWidth = content.width();
startWrapper = wrapper.offset().left;
endWrapper = wrapper.offset().left + wrapperWidth - contentWidth;
content.draggable({
    axis: "x",
    cursor: "e-resize",
    containment : [endWrapper,0,startWrapper,0]   
});
4

3 に答える 3

1

ドラッグ可能には、すでにあなたが望む動作があると思います。ドラッグ イベントを中断する代わりに、配列構文で包含オプションを使用します。

于 2013-07-11T20:15:06.543 に答える
0

簡単にしましょう：

あなたがする必要があるのは

$( ".content" ).draggable({ containment: ".parent" });

http://jsfiddle.net/r7MgY/19468/

于 2013-07-11T20:29:59.243 に答える
0 
$( "#divDrag" ).draggable({ containment: "parent" });
<div id="divInvisibleContainmentArea">
div id="divDrag"></div>
</div>
于 2015-04-29T19:09:42.543 に答える