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: > > With Richards help I've managed to create the dropzone so the controls > dropped there can be gathered afterwards as child elements. > I can't seem to figure out how to get them out of there again, e.g. in > case they were dropped by mistake. > I would like my original containing DIV to be able to act as droppable > for items which were moved by mistake. > I hope this makes sense to someone... > > Anyway, this is my code (we're using controls from devExpress, hence > the dxe tagprefixes): > <script type="text/javascript" src="../jQuery/jquery-1.3.2- > vsdoc2.js"></script> > <script type="text/javascript" src="../jQuery/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({ > 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> > <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"> > <asp:Label Text="Projects dropdownlist" > runat="server"></asp:Label> > <dxe:ASPxComboBox ID="ASPxComboBox1" > runat="server"> > <Items> > <dxe:ListEditItem Text="Projects" /> > </Items> > </dxe:ASPxComboBox> > </div> > <div class="ui-draggable" id="customerDiv"> > <asp:Label ID="Label1" Text="Customers > dropdownlist" runat="server"></asp:Label> > <dxe:ASPxComboBox ID="ASPxComboBox2" > runat="server"> > <Items> > <dxe:ListEditItem Text="Customers" /> > </Items> > </dxe:ASPxComboBox> > </div> > <div class="ui-draggable" id="actualsDiv"> > <asp:Label ID="Label2" Text="External actuals" > runat="server"></asp:Label> > <dxe:ASPxTextBox ID="ASPxTextBox1" runat="server" > Width="170px"> > </dxe:ASPxTextBox> > </div> > </div> > </div> > </form> > When I debug in Firebug the drop function for the $ > ("#initialContainer").droppable doesn't get called. > Any ideas why? > > Thanks, > Casper > > > --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
