jquery菜單列表拖動排序效果



157 626 209



特效描述:菜單列表拖動 拖動排序效果,

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">

2. 引入JS

<script src="js/jquery-git1.min.js"></script>
<script src="js/jquery-sortable-lists.min.js"></script>

3. HTML代碼

    <div class="container">
      <section id="main_content">
	<p class="title">jQuery可任意拖拽排序菜單樹機構樹特效代碼</p>
	<ul class="sTree2 listsClass" id="sTree2">
				<li id="item_a" data-module="a">
					<div>選項 a</div>
				</li>
				<li class="sortableListsOpen" id="item_b" data-module="b">
					<div>選項 b</div>
					<ul class="">
						<li id="item_b1" data-module="b">
							<div>選項 b1</div>
						</li>
						<li id="item_b2" data-module="b">
							<div>選項 b2</div>
						</li>
						<li id="item_b3" data-module="b">
							<div>選項 b3</div>
						</li>
						<li id="item_b4" data-module="b">
							<div>選項 b4</div>
						</li>
						<li id="item_b5" data-module="b">
							<div>選項 b5</div>
						</li>
					</ul>
				</li>
				<li class="" id="item_c" data-module="c">
					<div>選項 c</div>
					<ul class="">
						<li id="item_c1" data-module="c">
							<div>選項 c1</div>
						</li>
						<li id="item_c2" data-module="c">
							<div>選項 c2</div>
						</li>
						<li id="item_c3" data-module="c">
							<div>選項 c3</div>
						</li>
						<li id="item_c4" data-module="c">
							<div>選項 c4</div>
						</li>
						<li id="item_c5" data-module="c">
							<div>選項 c5</div>
						</li>
					</ul>
				</li>
				<li class="" id="item_d" data-module="d">
					<div>選項 d</div>
					<ul class="">
						<li id="item_d1" data-module="d">
							<div>選項 d1</div>
						</li>
						<li id="item_d2" data-module="d">
							<div>選項 d2</div>
						</li>
						<li id="item_d3" data-module="d">
							<div>選項 d3</div>
						</li>
						<li id="item_d4" data-module="d">
							<div>選項 d4</div>
						</li>
						<li id="item_d5" data-module="d">
							<div>選項 d5</div>
						</li>
					</ul>
				</li>
				<li class="" id="item_e" data-module="e">
					<div>選項 e</div>
				</li>
				<li class="" id="item_f" data-module="f">
					<div>選項 f</div>
				</li>
			</ul>
      </section>
    </div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 拖動排序 拖拽排序
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子