jquery列表拖動排列自定義拖動層排列



131 520 174



特效描述:列表拖動排列 自定義拖動層 拖動層排列,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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表