jquery - Jquery可拖动+可调整大小的元素超出范围

Question

如果父元素没有，则应用了可调整大小和可拖动的 Jquery 插件的元素将超出范围

overflow:hidden;

应用于它。

这是 JSfiddle：http: //jsfiddle.net/hjtBA/

尝试将元素拖动到最右下角几次。你会看到它超出了界限。我发现如果我将父元素（例如#outer）设置为溢出：隐藏问题就解决了。

问题： 我需要父母有溢出：其他CSS才能正常工作。在不使父溢出：隐藏的情况下，我还能如何解决问题？

提前致谢！

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!

Answer 2

我对任何有帮助的人的解决方案，小提琴中的工作代码

$('#box-1').draggable({
  grid: [20, 10],
  axis: "x",
  containment: '#container'
  });

http://jsfiddle.net/pjasv3hg/