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

我相信draggable已经拥有了你想要的行为。将containment option与数组语法一起使用，而不是中断拖动事件。

Answer 2

让它变得简单：

您需要做的就是

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

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

Jquery UI：停止拖动

2 个答案: