Hi all,
I've successfully been able to create 2 DIV's, and at run time populate the 1st DIV with a whole bunch of objects, all with the .drag class. The 2nd DIV has the .drop class, and is waiting for the user to drag and drop some objects into it. The problem is, whenever I try to drag an object outside of the 1st DIV, a scroll bar appears and I can't seem to drag outside the parent DIV of where an object was created! One thing I've noted, is that if I get rid of the scrollbars in my ASPX file below, I can drag freely, but then a giant column goes down the page and looks terrible.
Update - pretty sure this is a CSS problem, but I have no idea where I'm going wrong with my existing CSS stuff.
You can see what's happening at my dev site: http://www.mobiuspc.com Click any button at all then try to drag outside the parent DIV, you will see what I mean!
Here is my relevant ASPX info:
<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>
And the CSS I applied to it:
.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;
}
And the JQuery in case it helps:
$('.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 %>', '');
}
});