This project is read-only.

Dynamic single sort numbers

Aug 27, 2011 at 12:30 AM

Instead of having dragging generating a csv string of the new order. Is it possible to have it update the number of the elements instead. A hidden form element that was currently in position 4 update to the new position when moved to 1 and the other elements 1 ,2 ,3 then become 2, 3, 4 ?

<div id="gallery">
<ul >
   <li id="1"><div ><img border="1" src="i/thumbs/pic01.jpg" width="120" height="90"><form action="" method="post"> <input name="sort_no_1" type="hidden"  value="1" /></form></div></li>
   <li id="2"><div ><img border="1" src="i/thumbs/pic02.jpg" width="120" height="90"><form action="" method="post"><input name="sort_no_2" type="hidden"  value="2" /></form></div></li>
   <li id="3"><div ><img border="1" src="i/thumbs/pic03.jpg" width="120" height="90"><form action="" method="post"><input name="sort_no_3" type="hidden"  value="3" /></form></div></li>
   <li id="4"><div ><img border="1" src="i/thumbs/pic04.jpg" width="120" height="90"><form action="" method="post"><input name="sort_no_4" type="hidden"  value="4" /></form></div></li>
</ul>
</div>

Sep 30, 2011 at 9:48 AM
Edited Sep 30, 2011 at 9:50 AM

So you are wanting to set the value of the hidden fields to the position they appear on the page after dragging? This is how you would do this using jquery's attribute starts with selector, each and val methods:

<script type="text/javascript">
	$("#gallery").dragsort({ dragEnd: function() {
		$("#gallery input[name^='sort_no']").each(function(idx) { $(this).val(idx + 1); });
	}});
</script>