CODEWITHSUNDEEP
jquery
user2389793
user2389793

Reputation: 315

Draggable and resizable div with containment goes out of containment

i'm busy with a timetable script, for that i need to use jQuery draggable and resizeable. but is you can see in te jsFiddle the draggable has a parent, but you can drag it 10px over the parent, every click moment. EDIT: the thing i need is that it can not be dragged outside the container. who can help

http://jsfiddle.net/QBX2B/1/

html:

        <div class="containment" style="display:block; height:40px; width:150px; background-color:#f2f2f2;">
        <div class="baldie" style="display:block; height:40px; width:150px; background-color: rgba(214, 255, 210, .7);"/>
    </div>

jquery:

                $('.baldie').resizable({
                        containment: "parent",

                    }).draggable({
                        grid: [5,0],
                        containment:"parent",
                        drag: function( event, ui ) {

                        }
                    });

Upvotes: 4

Views: 2617

Answers (2)

wickdninja
wickdninja

Reputation: 1039

Inline styling is not good practice. It results in messy and sometimes hard to read code. Using CSS to modify the margin and padding of the parent we can allow the child to cover the entire parent. JSFiddle Solution

.baldie{
  display:block; 
    height:40px; 
    width:150px; 
    background-color: rgba(214, 255, 210, .7); 
    margin:1px;
}
.containment{
    position:relative;
    display:block; 
    height:40px; 
    width:150px; 
    background-color:#f2f2f2;
}

Upvotes: 0

FrontEnd Expert
FrontEnd Expert

Reputation: 5803

Adding a position:relative; to the container solves the issue.

I have modified Your code check run and you can check it :-

<div class="containment" style="position: relative; display:block; height:40px; width:150px; background-color:#f2f2f2;">
            <div class="baldie" style="display:block; height:40px; width:150px; background-color: rgba(214, 255, 210, .7);"/>
        </div>

Check it :-

Jquery UI resizable issue expands beyond containment (draggable also used)

Upvotes: 2

Related Questions