Question

我已经成功地创建了2个DIV，并且在运行时用一大堆对象填充第一个DIV，所有对象都使用.drag类。第二个DIV具有.drop类，正在等待用户将一些对象拖放到其中。问题是，每当我尝试将对象拖到第一个DIV之外时，就会出现一个滚动条，我似乎无法拖动到创建对象的父DIV之外！我注意到的一件事是，如果我在下面的ASPX文件中删除滚动条，我可以自由拖动，但随后一个巨大的列落在页面上并且看起来很糟糕。

更新 - 非常确定这是一个CSS问题，但我不知道我现有的CSS内容出错了。

您可以在我的开发网站上看到正在发生的事情：http://www.mobiuspc.com 完全单击任何按钮，然后尝试拖动父DIV，你会看到我的意思！

这是我的相关ASPX信息：

<asp:Panel ID="toolboxpanel" runat="server"  cssclass="toolbox" ScrollBars="Auto">
the toolbox is here
</asp:Panel>

<asp:Panel ID="droppanel" runat="server" CssClass="drop" >
 the drop area is here</asp:Panel>

</div>

我申请的CSS：

.drag
{
width: 125px;
height:94px;
padding:3px;
margin-bottom:35px;
float: left;
}
.toolbox
{
position:absolute;
height:700px;
width:324px;
border-style:solid;
border-width:2px;
border-color:Black;
}
.drop
{
height:700px;
width:700px;
border-style:solid;
border-width:2px;
border-color:Black;
margin-left:324px;
}

JQuery以防万一：

 $('.drag').draggable({ revert: true, helper: 'clone' });
 $('.drop').droppable({
    tolerance: "touch", // Here should be a string
    drop: function(ev, ui) {

        var poo = $(ui.draggable).attr("id");
        $('[id$="myHidden"]').val(poo);
        __doPostBack('<%= HiddenButton.UniqueID  %>', '');

    }
});

Answer 1

我没有在你的css或模板中看到'拖'类。你的意思是在.drag或.toolbox上设置你的可拖动吗？

从我的工作代码中脱颖而出的唯一另一件事是“position：absolute”。

Answer 2

在Firebug中使用您的页面时，更改以下内容可让我拖放：

.toolbox
{
/*position:absolute;*/ 
height:700px;
width:324px;
border-style:solid;
border-width:2px;
border-color:Black;
}
.drop
{
height:700px;
width:700px;
border-style:solid;
border-width:2px;
border-color:Black;
/* the following updated or added */
margin-left:328px;
position:absolute;
top:132px;
}

删除位置：绝对将你的div.drop元素移动到你的div.toolbox下面，这可能是你从Dave的回答中提到的怪异。我在.drop中为.drop更新的所有内容都只是重新定位div。

Jquery拖放包含问题 - CSS问题？

2 个答案: