可拖动对象“粘合”到边框答案

【问题标题】：Draggable object "glued" to border可拖动对象“粘合”到边框
【发布时间】：2012-10-13 08:46:59
【问题描述】：

我创建了一个用户控件，它在可拖动的 div 中包含一个标签，如下所示：

<style type="text/css">
.text_label
{

    margin-top:8px;
    font-size:18px;
    color:#545454;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -border-radius: 2px;
}

.clear
{
    clear:both;
    height:20px;
}

.drag
{
    display:block;
}

</style>

<div class="drag">
<asp:Label ID="lbl1" class="text_label" runat="server" Text="Click Me"/>
</div>
<div class="clear"></div>

对于可拖动，我在 ready() 函数中使用了以下选项：

$('.drag').draggable("option", "containment", 'parent');

在我的测试网页上，我在面板中添加了两个用户控件。我的目标是让它们在该面板中可拖动。

<style type="text/css">
    .panel
    {
        border-style:solid;
        border-width:medium;
        width:100%;

    }

</style>
<asp:Panel runat="server" ID="p1" CssClass="panel">
    <cc:UserControl1 runat="server" ID="Text1"  />
    <cc:UserControl2 runat="server" ID="Text2" />
</asp:Panel>

当我（在 Chrome 中）运行页面时，两个控件都与面板的右边框对齐，只能在 Y 轴上拖动。

知道为什么会发生以及缺少什么吗？

谢谢。

【问题讨论】：

标签： jquery draggable jquery-ui-draggable containment

【解决方案1】：

可能是因为 clear 有 clear:both 的类而坚持下去

【讨论】：

顺便说一句，当我取消遏制选项时，向所有方向拖动都没有问题。