Jquery UI - 动态添加的可调整大小和可拖动的 div 超出了包含范围答案

【问题标题】：Jquery UI - Dynamically added resizable & draggable divs are going outside the containmentJquery UI - 动态添加的可调整大小和可拖动的 div 超出了包含范围
【发布时间】：2012-06-12 12:01:13
【问题描述】：

请通过 fiddle 的演示链接。当用户向 ParentDIV 添加新文本时，新添加的图层超出了父图层的大小。

尝试单击按钮 3 或 4 次，您会注意到新的文本层将位于父层之外..

我们可以将新添加的层限制在层内吗？ JqueryUI 控件是否存在任何逻辑？

请帮忙。

jsFiddle Demo link

【问题讨论】：

标签： jquery jquery-ui jquery-resizable

【解决方案1】：

试试这个：

.dragClass {
   display: inline-block;
   float: left
}

$(".dragClass")
    .draggable({
        stack: "div",            
        cursor      : "move",
        delay       : 100,
        scroll      : false,
        containment : "parent",
        refreshPositions: true,
        scroll: true
    })

http://jsfiddle.net/e2yfC/18/

【讨论】：

感谢您的尝试，但不是它显示滚动条并且仍然能够添加文本并推送到区域之外...我不想要滚动条..我们可以避免 DOM 内容推送吗？跨度>

【解决方案2】：

相反，我选择了另一种解决方案，即设置新添加的 div 的位置，即顶部和左侧位置。这样，新创建的 div 或图像会粘在一个地方，比如 top:10;左：10。

【讨论】：