jQuery UI：停止拖动

Question

当他的子位置等于或高于父位置时，我试图停止拖动子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]   
});

Answer 1

我相信可拖动已经具有您想要的行为。 将containment选项与数组语法一起使用，而不是中断拖动事件。

Answer 2

让它变得简单：

您需要做的就是

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

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

Answer 3

$( "#divDrag" ).draggable({ containment: "parent" });
<div id="divInvisibleContainmentArea">
div id="divDrag"></div>
</div>