As simple as I can get it I think. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"; > <head runat="server"> <title>Manage the custom control</title> <link rel="Stylesheet" href="/MyPlan/themes/ui-lightness/ ui.all.css" /> <script type="text/javascript" src="jquery-1.3.2-vsdoc2.js"></ script> <script type="text/javascript" src="jquery- ui-1.7.2.custom.min.js"></script> <script type="text/javascript"> /* <![CDATA[ */ $(document).ready(function(){ $(".ui-draggable").draggable({ revert: "invalid" }); $("#droppable").droppable({ tolerance: "fit", drop: function(event, ui) { $(this).append(ui.draggable); } }); $("#initialContainer").droppable({ drop: function(event, ui){ $(this).append(ui.draggable); } }); }); /* ]]> */ </script> </head> <body> <form id="form1" runat="server"> <div id="container" style="float: right; width: 75%;"> <h3 class="ui-widget-header">Drop the controls over here.</ h3> <input type="button" id="gathercontrols" value="Get control positions" /> <div id="droppable" class="ui-widget-content" style="min- height:200px;"> </div> </div> <div id="dragableItems" style="float: left; width: 24%;"> <h3 class="ui-widget-header">These are the controls available to the form.</h3> <div style="border: 1px solid #ddd; min-height:200px;" id="initialContainer"> <div class="ui-draggable" id="projectDiv"> <span>Projects dropdownlist</span> <select> <option>Customers</option> </select> </div> </div> </div> </form> </body> </html> I can drag elements to the #droppable div but not away from it.
Thanks, Casper On Aug 20, 11:01 am, Jörn Zaefferer <[email protected]> wrote: > Still not getting anywhere. Can you simplify that until only code > directly related to the issue here is left? > > Jörn > > On Thu, Aug 20, 2009 at 8:50 AM, Casper<[email protected]> wrote: > > > Sorry, here it is without the asp.net code. > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// > >www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > > > <html xmlns="http://www.w3.org/1999/xhtml"; > > > <head runat="server"> > > <title>Manage the custom control</title> > > <link rel="Stylesheet" href="/MyPlan/themes/ui-lightness/ > > ui.all.css" /> > > <script type="text/javascript" src="jquery-1.3.2-vsdoc2.js"></ > > script> > > <script type="text/javascript" src="jquery- > > ui-1.7.2.custom.min.js"></script> > > <script type="text/javascript"> > > /* <![CDATA[ */ > > $(document).ready(function(){ > > $(".ui-draggable").draggable({ > > grid: [5,5], > > cursorAt: { left: 5, top: 5 }, > > cursor: 'crosshair', > > revert: "invalid", > > opacity: 0.35 > > }); > > $("#droppable").resizable({ > > handles: 'se', > > containment: $("#container") > > }); > > $("#droppable").droppable({ > > tolerance: "fit", > > drop: function(event, ui) { > > // Also subtract the cursorAt property > > var left = event.pageX - this.offsetLeft - 5; > > var top = event.pageY - this.offsetTop - 5; > > if ($(ui.draggable).parent().attr("id") === > > "initialContainer"){ > > $(this).append(ui.draggable); > > ui.draggable.css("left", left); > > ui.draggable.css("top", top); > > } > > } > > }); > > $("#gathercontrols").click(function(e){ > > e.preventDefault(); > > var $children = $("#droppable").children(); > > var resultString = ""; > > $children.each(function(i){ > > // Do the stuff here... > > if(this.id !== ''){ > > resultString += this.id + "\n Top:" + $(this).css > > ("top") + "\n left:" + $(this).css("left") + "\n position:" + $ > > (this).css("position") + "\n"; > > } > > }); > > if (resultString !== ""){ > > alert(resultString); > > } > > }); > > $("#initialContainer").droppable({ > > drop: function(event, ui){ > > $(ui.draggable).appendTo($("#droppable")); > > } > > }); > > }); > > > /* ]]> */ > > </script> > > > </head> > > <body> > > <form id="form1" runat="server"> > > <div id="container" style="float: right; width: 75%;"> > > <h3 class="ui-widget-header">Drop the controls over here.</ > > h3> > > <input type="button" id="gathercontrols" value="Get > > control positions" /> > > <div id="droppable" class="ui-widget-content" style="min- > > height:200px;"> > > </div> > > </div> > > <div id="dragableItems" style="float: left; width: 24%;"> > > <h3 class="ui-widget-header">These are the controls > > available to the form.</h3> > > <div style="border: 1px solid #ddd; min-height:200px;" > > id="initialContainer"> > > <div class="ui-draggable" id="projectDiv"> > > <span>Projects dropdownlist</span> > > <select> > > <option>Customers</option> > > </select> > > </div> > > <div class="ui-draggable" id="customerDiv"> > > <span>Customers dropdownlist</span> > > <select> > > <option>Customers</option> > > </select> > > </div> > > <div class="ui-draggable" id="actualsDiv"> > > <span>External actuals</span> > > <input type="text" /> > > </div> > > </div> > > </div> > > </form> > > </body> > > </html> > > > On Aug 19, 3:25 pm, Jörn Zaefferer <[email protected]> > > wrote: > >> Can you provide a (simplified) testpage? Having asp code doesn't help much. > > >> Jörn > > >> On Wed, Aug 19, 2009 at 2:09 PM, Casper<[email protected]> wrote: --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
