views:

1669

answers:

2

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  %>', '');

    }
});
+1  A: 

I don't see a 'drag' class in your css or template. Did you mean to set up your draggable on .drag, or on .toolbox?

The only other thing that stands out from the working code I have is the "position: absolute".

Dave W. Smith
Whoops! I forgot to copy 'n paste it. Added! Is the position:absolute a bad thing?
Bill Sambrone
Dunno. It just stood out as a difference. Removing it is a simple experiment.
Dave W. Smith
When I removed it, that caused some weirdness. I was then able to drag text outside the DIV, but nothing else. The drop area DIV also no longer accepted drops?
Bill Sambrone
+1  A: 

In playing around with your page in Firebug, changing the following allowed me to drag and drop:

.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;
}

Removing position:absolute moved your div.drop element below your div.toolbox, which may be the weirdness you were referring to from Dave's answer. Everything I updated in the css for .drop is just repositioning the div.

Ben Koehler
As soon as I updated my CSS to the above code, I can no longer drag images anymore. Whenever I attempt to drag a draggable, it just drags the text? I also cannot fire any .drop events anymore. Any idea why that would happen?
Bill Sambrone
Update to my previous comment. When I look at the actual live site, I can drag the image as intended. But when I try and use the exact same code in Visual Studio, I can only drag text. This is bugging the snot out of me! Funny thing is, when I get it running in localhost, then open up my live site in a different tab and go BACK to my localhost site, it works fine. WEIRD!
Bill Sambrone