jquery列表拖动排列自定义拖动层排列



127 504 169



特效描述:列表拖动排列 自定义拖动层 拖动层排列,jquery列表模块拖动层,当点击或拖动列表时,可以自定义随意拖放列表模块到相应位置。支持回调函数的拖动层。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.dragsort-0.4.min.js"></script>

2. HTML代码

	<div class="demo">
		<h1>jQuery列表拖动排列演示</h1>
		<h2>简单的一组列表:</h2>
		<ul class="dragsort-ver">
			<li>面包</li>
			<li>蔬菜</li>
			<li>肉</li>
			<li>牛奶</li>
			<li>奶油</li>
			<li>冰淇淋</li>
		</ul>
		<br/>
		<script type="text/javascript">
			$("ul:first").dragsort();
		</script>
		<h2>两组列表拖放:</h2>
		<ul class="dragsort" id="list2" style="float:right;">
			<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 class="dragsort" 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>
		<!-- 排序保存在这里可以检索服务器上的回传 -->
		<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>",
			scrollSpeed: 5
		});
		function saveOrder() {
			var data = $("#list1 li").map(function(){
				return
				$(this).children().html();
			}).get();
			$("input[name=list1SortOrder]").val(data.join("|"));
		};
		</script>
		<div style="clear:both;"></div>
		<h2>Usage</h2>
		$("ul").dragsort({ dragSelector: "li", dragEnd: function() { }, dragBetween: false, placeHolderTemplate: "&lt;li&gt;&lt;/li&gt;" });<br/>
		<br/>
		<dl class="dragfunction">
			<dt>dragSelector</dt>
			<dd>CSS选择器内的元素的列表项的拖动手柄。默认值是“li”。</dd>
			<dt>dragSelectorExclude</dt>
			<dd>CSS选择器的元素内的dragSelector不会触发dragsort的。默认值是"input, textarea, a[href]"。</dd>
			<dt>dragEnd</dt>
			<dd>拖动结束后将被调用的回调函数.</dd>
			<dt>dragBetween</dt>
			<dd>设置为“true”,如果你要启用多组列表之间拖动选定的列表。 默认值是false。</dd>
			<dt>placeHolderTemplate</dt>
			<dd>拖动列表的HTML部分。默认值是"&lt;li&gt;&lt;/li&gt;".</dd>
			<dt>scrollContainer</dt>
			<dd>CSS选择器的元素,作为滚动容器,例如溢出的div设置为自动。 默认值是“窗口“.</dd>
			<dt>scrollSpeed</dt>
			<dd>一个数字,它代表了速度,页面拖动某一项时,将滚动容器外,较高使用价值的是速度和较低的值是较慢的。 如果设置为"0"以禁用滚动。默认值是"5".</dd>
		</dl>
	</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 拖动 拖拽 拖动插件 拖拽插件 拖动排序 拖拽排序

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到