将可拖动对象“粘合"到“可粘贴对象"中.去边境 [英] Draggable object "glued" to border

问题描述

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

I've created a user control that includes a label inside a draggable div, like this:

<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()函数中使用以下选项:

For draggable I'm using the following option in the ready() function:

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

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

On my test web page I'm adding two of the user controls inside a panel. My goal is to make them draggable inside that panel.

<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轴上拖动.

When I run the page (in Chrome), both controls are aligned to the right border of the panel are draggable only on the Y axis.

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

Any idea why it happens and what is missing?

谢谢.

推荐答案

可能是因为类clear具有clear:both

这篇关于将可拖动对象“粘合"到“可粘贴对象"中.去边境的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！