Looks to me they are ordered in a vertical pattern, try using some "float:left" css and see what happens.
On 26 abr, 06:29, jojiju <[email protected]> wrote: > Dear all, > I have a problem in drag and drop in a code below. In two column > layout, when I want to sort between two li vertically then sorting > across the column occurs. for eg if I have the two column layout as - > 1 2 > 3 4 > > Now if I move 2 to the lower row, I should get. > > 1 4 > 3 2. > > But I get > > 1 4 > 2 3 > > please help. > > <style> > body { > font-family: Arial, Helvetica, sans-serif; > font-size: 12px; > color: #333333;} > > label, legend { > font-weight: bold; > width: 30%; > display: block; > float: left;} > > div ul { > list-style: none; > padding: 20px; > /*border: 1px dotted #FF9999;*/ > > } > > li { > float: left; > display: block; > height: 30px;} > > .two-column li { > width: 50%;} > > .three-column li { > width: 33%; > > } > > .one-column li { > width: 100%;} > > </style> > <script src="scriptaculous/lib/prototype.js"></script> > <script src="scriptaculous/src/scriptaculous.js? > load=effects,dragdrop"></script> > <script> > var moveTo = Array(); > > moveTo.push('u_group1'); > moveTo.push('u_group2'); > > </script> > </head> > <body> > <form action=""> > <div id="panel"> > <div id="group1" class="section"> > <fieldset> > <legend>Organization Detail</legend> > <ul id="u_group1" class="two-column"> > <li id="item_Form_No"> > <label for="form_no">Form > No.</label><div><input name="form_no" > type="text" id="form_no" /> > </div> > > </li> > <li id="item_Service_Delivery_Partner"><label > for="sdp_cd">Service Delivery Partner</label> > <div> > <select name="sdp_cd" id="sdp_cd"> > <option value="">-- Select > Service Delivery Partner --</option> > <option value="">A</option> > <option>B</option> > </select> </div> > </li> > <li id="item_Local_Admin"> > <label for="local_admin_cd">Local Admin:</label> > <div> <select name="local_admin_cd" > id="local_admin_cd"> > <option value="">-- Select Service > Delivery Partner --</ > option> > <option value="">A</option> > <option>B</option> > </select></div> > </li> > <li id="item_Member_Name"><label for="name">Member > name:</label> > <div><input name="name" type="text" id="name" /></div> > </li> > </ul> > </fieldset> > </div> > > <div id="group2" class="section"> > <fieldset> > <legend>Personal Detail</legend> > <ul id="u_group2" class="one-column"> > <li id="item_5"><label for="fathers_name">Father's > Name:</label> > <input name="fathers_name" type="text" id="fathers_name" > /> > </li> > <li><label>Gender:</label> > <div> > <input name="M" type="radio" value="Male" /> > Male > <input name="M" type="radio" value="Female" /> > Female </div> > </li> > <li id="item_6"><label>Date Of Birth:</label> > <div> > <select id="DT_OF_BIRTH_Month_ID"> > <option selected="" value="">-- Select Date > --</option> > <option value="0">January</option> > <option value="1">February</option> > <option value="2">March</option> > <option value="3">April</option> > <option value="4">May</option> > <option value="5">June</option> > <option value="6">July</option> > <option value="7">August</option> > <option value="8">September</option> > <option value="9">October</option> > <option value="10">November</option> > <option value="11">December</option> > </select> > </div> > </li> > <li id="item_7"><label>Age:</label> > <input name="" type="text" /> > </li> > <li id="item_8"><label>Moblie:</label> > <div> > <input name="" type="text" /> > </div> > </li> > </ul> > </fieldset> > </div> > </div> > <? /*<fieldset> > <legend>Order</legend> > <fieldset> > <legend>Debug and Help Information</legend> > <input onclick="getGroupOrder()" value="Debug: Show serialized group > order" type="button"> > <br> > </fieldset>*/?> > <script> > Event.observe(window,'load',init,false); > function init() { > Sortable.create('u_group1',{tag:'li',dropOnEmpty:false, containment: > moveTo,constraint:false}); > Sortable.create('u_group2',{tag:'li',dropOnEmpty: false, containment: > moveTo,constraint:false }); > Sortable.create('panel',{tag:'div'}); > > } > > </script> > </body> > </html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" 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/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
