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
-~----------~----~----~----~------~----~------~--~---
