jQuery文字列表自由拖拽排序



220 876 293



特效描述:jQuery 文字列表 自由拖拽排序,jQuery文字列表自由拖拽排序

代码结构

1. 引入CSS

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

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/dragslot.js"></script>

3. HTML代码

<br>
<section class="demo clearfix">
	<div id="dragslot" class="container">
	<div class="slot-title bg-red border-red">Todo</div>
	<div class="slot-title bg-yellow border-yellow">Doing</div>
	<div class="slot-title bg-green border-green">Done</div>
	<div class="slot border-red">
		<ul class="slot-list">
			<li class="slot-item" id="a"><div class="slot-handler clearfix">
			<div class="avator">
				<img src="img/avatar1.jpg"/>
			</div>
			<div class="content">
				<div class="item-title">UI design</div>
				<p>finish ui design of dashboard page</p>
			</div>
			</div></li>
			<li class="slot-item"><div class="slot-handler">
				<div class="slot-handler clearfix">
			<div class="avator">
				<img src="img/avatar2.jpg"/>
			</div>
			<div class="content">
				<div class="item-title">Bug fixing</div>
				<p>Fix bugs of demo page</p>
			</div>
			</div>
			</div></li>
			<li class="slot-item"><div class="slot-handler">
				<div class="slot-handler clearfix">
			<div class="avator">
				<img src="img/avatar3.jpg"/>
			</div>
			<div class="content">
				<div class="item-title">Implementation</div>
				<p>implement list item drop function</p>
			</div>
			</div>
			</li>
		</ul>
	</div>
	<div class="slot border-yellow">
	<ul class="slot-list">
		<li class="slot-item"><div class="slot-handler">
				<div class="slot-handler clearfix">
			<div class="avator">
				<img src="img/avatar5.jpg"/>
			</div>
			<div class="content">
				<div class="item-title">UI design</div>
				<p>design the area filter ui</p>
			</div>
			</div>
			</div></li>
			<li class="slot-item"><div class="slot-handler">
				<div class="slot-handler clearfix">
			<div class="avator">
				<img src="img/avatar6.jpg"/>
			</div>
			<div class="content">
				<div class="item-title">Implementation</div>
				<p>implement sort of list data</p>
			</div>
			</div>
			</div></li>
			</ul>
	</div>
	<div class="slot border-green">
	<ul class="slot-list">
		</li>
			<li class="slot-item"><div class="slot-handler">
				<div class="slot-handler clearfix">
			<div class="avator">
				<img src="img/avatar4.jpg"/>
			</div>
			<div class="content">
				<div class="item-title">UI design</div>
				<p>design the Carousel with Teddy bear pictures</p>
			</div>
			</div>
			</div></li>
			</ul>
	</div>
</div>
</section>
<script>
	jQuery(function($){
		$('#dragslot').dragslot({
			dropCallback: function(el){
			//	alert(el);
			}
		});
	});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
VICTORY
VICTORY :  很实用,感谢分享 https://www.mybj123.com/
2019-09-19 16:31:52


热门标签: 文字叠加 文字拖动 文字提示框 文字收缩展开 文字放大缩小 文字翻转旋转 文字淡出淡进 文字全屏 文字延迟加载 拖动拽动 360全景 html5文字动画 文字滚动 文字滑动 文字切换 滑动星星打分 图片文字 文字导航菜单 文字 其他更多 拖动排序 文字列表 排序

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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