Contribute-a Nested list sorting demo

Jul 12, 2010 at 8:55 AM

well,i just added the nested list sorting demo to the original demo file example.html.

I don't know how to attach a file here,so i paste the source 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>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.dragsort-0.3.10.min.js"></script>
	<style type="text/css">
		body { font-family:Arial; font-size:12pt; padding:20px; width:800px; margin:20px auto; border:solid 1px black; }
		h1 { font-size:16pt; }
		h2 { font-size:13pt; }
		ul { margin:0px; padding:0px; margin-left:20px; }
		#list1, #list2,#list3,#list5 { width:350px; list-style-type:none; margin:0px; }
		#list4{width:90%; padding-left:25px;}
		#list1 li, #list2 li{ float:left; padding:5px; width:100px; height:100px; }
		.nestedsort li{padding:5px;} 
		#list1 div, #list2 div { width:90px; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px; }
		#list3 div, #list4 div,#list5 div { width:180px; height:25px; border:solid 1px black; background-color:#E0E0E0; text-align:center; }
		#list3{float:left;}
		#list2,#list5 { float:right; }
		#list4 div{border-color:red;}
		#list5 div{border-color:blue;}
		.placeHolder div { background-color:white !important; border:dashed 1px gray !important; }
	</style>
</head>
<body>
	
	<h1>jQuery List DragSort Example</h1>
	
	<a href="http://dragsort.codeplex.com/">Homepage</a><br/>
	<br/>
	
	<h2>Simple 1D list:</h2>
	
	<ul>
		<li>bread</li>
		<li>vegetables</li>
		<li>meat</li>
		<li>milk</li>
		<li>butter</li>
		<li>ice cream</li>
	</ul>
	
	<script type="text/javascript">
		$("ul:first").dragsort();
	</script>
	
	<br/>
	<h2>2D list with drag and drop between lists:</h2>
	
	<ul id="list2">
		<li><div>10</div></li>
		<li><div>11</div></li>
		<li><div>12</div></li>
		<li><div>13</div></li>
		<li><div>14</div></li>
		<li><div>15</div></li>
		<li><div>16</div></li>
		<li><div>17</div></li>
		<li><div>18</div></li>
	</ul>
	
	<ul id="list1">
		<li><div>1</div></li>
		<li><div>2</div></li>
		<li><div>3</div></li>
		<li><div>4</div></li>
		<li><div>5</div></li>
		<li><div>6</div></li>
		<li><div>7</div></li>
		<li><div>8</div></li>
		<li><div>9</div></li>
	</ul>
	
	<!-- save sort order here which can be retrieved on server on postback -->
	<input name="list1SortOrder" type="hidden" />
	
	<script type="text/javascript">
		$("#list1, #list2").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
		
		function saveOrder() {
			var serialStr = "";
			$("#list1 li").each(function(i, elm) { serialStr += (i > 0 ? "|" : "") + $(elm).children().html(); });
			$("input[name=list1SortOrder]").val(serialStr);
		};
	</script>
	<div style="clear:both;"></div>
	<h2>nested list with drag and drop</h2>
	<ul id="list3" class="nestedsort">
		<li><div>1</div></li>
		<li><div>2</div></li>
		<li><div>3</div></li>
		<li><div>4</div></li>
		<li><div>5</div></li>
		<li class="ext">
			<ul id="list4" class="nestedsort">
				<li><div>6</div></li>
				<li><div>7</div></li>
				<li><div>8</div></li>
				<li><div>9</div></li>
			</ul>
		</li>
	</ul>
	<ul id="list5" class="nestedsort">
		<li><div>10</div></li>
		<li><div>11</div></li>
		<li><div>12</div></li>
		<li><div>13</div></li>
		<li><div>14</div></li>
	</ul>
	<div style="clear:both;"></div>
	<script type="text/javascript">
		$(".nestedsort").dragsort({itemSelector:"li:not('.ext')" ,dragSelector: "div", dragBetween: true, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
	</script>
	<h2>Usage</h2>
	$("ul").dragsort({ dragSelector: "li", dragEnd: function() { }, dragBetween: false, placeHolderTemplate: "&lt;li&gt;&lt;/li&gt;" });<br/>
	<br/>
	<dl>
		<dt>dragSelector</dt>
		<dd>The <a href="http://docs.jquery.com/Selectors">CSS selector</a> of the element inside the list to act as the drag handle. The default is LI.</dd>
		<dt>dragEnd</dt>
		<dd>The callback function that will be called after the dragging has ended.</dd>
		<dt>dragBetween</dt>
		<dd>Set to "true" if you want to enable the ability to drag between selected lists. The default is false.</dd>
		<dt>placeHolderTemplate</dt>
		<dd>The html of the place holder for the dragged item. The default is "&lt;li&gt;&lt;/li&gt;".</dd>
	</dl>
</body>
</html>