4

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 ) {

                        }
                    });
Cœur
  • 37,241
  • 25
  • 195
  • 267
user2389793
  • 315
  • 1
  • 3
  • 8

2 Answers2

2

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)

Community
  • 1
  • 1
Javascript Coder
  • 5,691
  • 8
  • 52
  • 98
  • @Learner Even using the jsfiddle from the link you posted, im still able to drag the dragabble outside the containment – A. Wolff May 16 '13 at 12:12
  • There is a ticket for this bug suggesting your workaround or modify jquery ui plugin (weird solution): http://bugs.jqueryui.com/ticket/4489 – A. Wolff May 16 '13 at 12:16
0

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;
}
wickdninja
  • 949
  • 1
  • 10
  • 15
  • Like @user2389793, i still can drag element outside containment by few pixels each time using chrome win7 – A. Wolff May 16 '13 at 12:53
  • you need to click and drag to the right side if you do this multiple times it goes 10px to the right every click – user2389793 May 16 '13 at 13:23
  • @n8ross in your exampe i can still drag the dreagable dive outside the parent div by draging the dragable div to the right side of the parent, than i click it multiple times and in the mean time i drag it to right and the div goes outside the border – user2389793 May 16 '13 at 14:00
  • @n8ross im using chrome but if you take my exaple in chrome and you click the green hold it and drag it to the right and release it, you should have the same thing as i have... if not i don't know what is wrong but i can drag it outside the div, than it is a complete mystery – user2389793 May 16 '13 at 14:35
  • @user2389793 [Solution](http://jsfiddle.net/QBX2B/3/) I was finally able to reproduce your error. Adding a 1px margin and padding seems to do the trick – wickdninja May 16 '13 at 14:37
  • I removed my previous comments since they were not relevant to the solution. I also edited the original answer to reflect the last fiddle i updated: [http://jsfiddle.net/QBX2B/3/](http://jsfiddle.net/QBX2B/3/) – wickdninja May 16 '13 at 14:43
  • @user2389793 after some more testing I realized the padding isn't necessary only the margin. [Final Fiddle](http://jsfiddle.net/QBX2B/5/) – wickdninja May 16 '13 at 15:23