Question

An element which is has the resizable and draggable Jquery plugin applied to it is going out of bounds if the parent element doesn’t have

overflow:hidden;

Applied to it.

Here’s the JSfiddle: http://jsfiddle.net/hjtBA/

Try dragging the element to the far most bottom right corner a couple of times. You will see that it is going out of bounds. I figured out that if i set the parent element e.g. #outer to overflow:hidden that the problem is solved.

The problem:
I need the parent to have overflow:visible for other CSS to work fine. How else can i resolved the problem without making the parent overflow:hidden?

Thanks in advance!

Answer 1

Resizable transforms the element to be absolutely positioned, so the bounding box is irrelevant,

There seems to be a bug, that you can drag 3px out of the bounding box, so replace your fiddle with this code which adds a 3px snap function so you can’t drag 3px out of the boundary 🙂

$(function(){
    $('#inner').resizable({
        containment: 'parent'        
        }).draggable({
        containment: 'parent' ,
        snap: "#outer", snapMode: "inner" ,
        snapTolerance: 3       
    });    
});​

You need overflow visible! when the item draggable and resizable, otherwise I found that it caused the item to be irretrievable!