CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
user1633525
user1633525

Reputation:

Jquery UI: stop dragging

I'm trying to stop dragging the children div when his position is equal or higher than the parent position:

$( ".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 );
       }
    }
});

But the div only stops when I release the mouse. I need it to stop while being dragged.

SOLVED

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]   
});

Upvotes: 1

Views: 1405

Answers (3)

user3108425
user3108425

Reputation: 1

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

Upvotes: 0

Dani
Dani

Reputation: 1250

lets make it easy:

all you need to do is

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

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

Upvotes: 0

jbabey
jbabey

Reputation: 46647

I believe draggable already has the behavior you want. Use the containment option with the array syntax instead of interrupting the drag event.

Upvotes: 1

Related Questions