Jquery проблема с перетаскиванием - проблема CSS?

Question

Я успешно смог создать 2 DIV, и во время выполнения заполнить 1-й DIV целой кучей объектов, все с классом .drag. 2-й DIV имеет класс .drop и ожидает, когда пользователь перетянет в него некоторые объекты. Проблема в том, что всякий раз, когда я пытаюсь перетащить объект за пределы 1-го 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

Играя со своей страницей в 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;
}

Удаление позиции: absolute переместил ваш элемент div.drop ниже вашего div.toolbox, что может быть странностью, на которую вы ссылались из ответа Дейва. Все, что я обновил в css для .drop, это просто перестановка div.

Answer 2

Я не вижу класс перетаскивания в вашем CSS или шаблоне. Вы хотели настроить перетаскиваемый файл на .drag или .toolbox?

Единственное, что выделяется из рабочего кода, который у меня есть, это "позиция: абсолют".