可拖拽和可调整大小的div超出了包含范围

Question

我正在忙于一个时间表脚本，需要使用jQuery的可拖拽和可调整大小功能。但是在jsFiddle中可以看到，可拖拽元素有一个父级容器，但每次单击时都可以将其拖动10像素超出父级容器。 编辑： 我需要的是它不能被拖出容器之外。 谁能帮忙？

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

                        }
                    });

- user2389793

---

请明确定义您确切需要的内容是什么？ - Javascript Coder

你想让 baldie div 被拖出父 div 吗？ - Sreekumar P

现在可能只有在Chrome上能实现，但未来不一定无法拓展到其他浏览器。 - user2389793

Answer 1

将position:relative;添加到容器中可以解决这个问题。

我已经修改了您的代码，并进行了测试，您可以查看：

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

请查看以下内容：

Jquery UI 可调整大小的问题，超出了容器（也使用了可拖动）

- Javascript Coder

---

@Learner 即使使用您发布的链接中的 jsfiddle，我仍然能够将可拖动元素拖出其容器。 - A. Wolff

这个 bug 有一个票 suggesting 你的 workaround 或修改 jquery ui 插件（奇怪的解决方案）：http://bugs.jqueryui.com/ticket/4489 - A. Wolff

Answer 2

内联样式不是一个好的实践。它会导致代码混乱，有时难以阅读。使用CSS来修改父元素的边距和填充，我们可以让子元素覆盖整个父元素。 JSFiddle解决方案

.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

---

像@user2389793一样，我仍然可以在Chrome Win7中每次将元素拖出容器几个像素。 - A. Wolff

如果您多次进行此操作，则需要单击并拖动到右侧，每次单击向右移动10像素。 - user2389793

在你的例子中，我仍然可以通过将可拖动的div向父div的右侧拖动来将其拖出父div，然后我多次单击它并在此期间将其向右拖动，这样该div就会超出边框。 - user2389793

@n8ross 我正在使用 Chrome，但如果你在 Chrome 中使用我的示例，点击绿色的按钮并将其向右拖动并释放，你应该会得到与我相同的结果... 如果不行，我不知道出了什么问题，但我可以将其拖到 div 外面，那就是一个完全的谜。 - user2389793

@user2389793 【解决方案】（http://jsfiddle.net/QBX2B/3/）我终于成功重现了你的错误。添加1像素的边距和填充似乎是个好办法。 - wickdninja