jquery菜单列表拖动排序效果



152 606 203



特效描述:菜单列表拖动 拖动排序效果,

代码结构

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

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