div拖动排序插件jquery.sortable特效js和jquery代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 div拖动排序插件jquery.sortable特效js和jquery代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div拖动排序插件jquery.sortable</title>
<!-- Used by example page -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Used /by example page -->

</head>
<body>
<section id="intro">
	<h1>拖动排序</h1>
</section>
 <section>
	<ul class="gbin1-list">
		<li>jQuery</li>
		<li>javascript</li>
		<li>HTML5</li>
		<li>CSS3</li>
	</ul>
	<div style="clear:both" id="msg"></div>
 </section>

 <!-- Dependencies -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.sortable.js"></script> 
<script type="text/javascript">
$('.gbin1-list').sortable().bind('sortupdate', function() {
	$('#msg').html('已变换位置').fadeIn(200).delay(1000).fadeOut(200);
});
</script>
</body> 
</html>

JS代码(jquery.sortable.js):

/* * HTML5 Sortable jQuery Plugin * http://farhadi.ir/projects/html5sortable * * Copyright 2012,Ali Farhadi * Released under the MIT license. */
(function($){
	var dragging,placeholders = $();
	$.fn.sortable = function(options){
	options = options ||{
}
;
	return this.each(function(){
	if (/^enable|disable|destroy$/.test(options)){
	var items = $(this).children($(this).data('items')).attr('draggable',options == 'enable');
	options == 'destroy' &&items.add(this).removeData('connectWith').removeData('items').unbind('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s');
	return;
}
var index,items = $(this).children(options.items),connectWith = options.connectWith || false;
	var placeholder = $('<' + items[0].tagName + ' class="sortable-placeholder">');
	var handle = options.handle,isHandle;
	items.find(handle).mousedown(function(){
	isHandle = true;
}
).mouseup(function(){
	isHandle = false;
}
);
	$(this).data('items',options.items)placeholders = placeholders.add(placeholder);
	if (connectWith){
	$(connectWith).add(this).data('connectWith',connectWith);
}
items.attr('draggable','true').bind('dragstart.h5s',function(e){
	if (handle && !isHandle){
	return false;
}
isHandle = false;
	var dt = e.originalEvent.dataTransfer;
	dt.effectAllowed = 'move';
	dt.setData('Text','dummy');
	dragging = $(this).addClass('sortable-dragging');
	index = dragging.index();
}
).bind('dragend.h5s',function(){
	dragging.removeClass('sortable-dragging').fadeIn();
	placeholders.detach();
	if (index != dragging.index()){
	items.parent().trigger('sortupdate');
}
dragging = null;
}
).not('a[href],img').bind('selectstart.h5s',function(){
	this.dragDrop && this.dragDrop();
	return false;
}
).end().add([this,placeholder]).bind('dragover.h5s dragenter.h5s drop.h5s',function(e){
	if (!items.is(dragging) && connectWith !== $(dragging).parent().data('connectWith')){
	return true;
}
if (e.type == 'drop'){
	e.stopPropagation();
	placeholders.filter(':visible').after(dragging);
	return false;
}
e.preventDefault();
	e.originalEvent.dataTransfer.dropEffect = 'move';
	if (items.is(this)){
	dragging.hide();
	$(this)[placeholder.index() < $(this).index() ? 'after':'before'](placeholder);
	placeholders.not(placeholder).detach();
}
return false;
}
);
}
);
}
;
}
)(jQuery);

CSS代码(style.css):

h1{font-size:24px;font-family:arial;margin:10px;}
.gbin1-list{list-style:none;padding:0;margin:0;}
.gbin1-list li{line-height:80px;float:left;width:80px;height:80px;text-align:center;border:1px solid #CCC;margin:10px;font-family:arial;background:#707070;color:#FFF;box-shadow:0px 0px 10px #505050;border-radius:5px;padding:0px;}
#msg{font-size:12px;font-family:arial;background:#303030;color:#cccccc;padding:10px;display:none;width:370px;margin:10px;}

附件:下载该文件资源,减少时间成本(增值服务)