jquery拖动排列布局代码js代码

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

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

以下是 jquery拖动排列布局代码js代码的示例演示效果:

当前平台(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>jquery拖动排列布局代码</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#efefef;}

#module_list{width:850px;margin:0 auto;}
.modules{float:left; width:200px; height:140px; margin:10px; overflow:hidden; border:1px solid #acc6e9; background:#e8f5fe}
.m_title{height:24px; line-height:24px; background:#afc6e9}
#loader{height:24px; text-align:center}
.clear{clear:both}
</style>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/idrag.js"></script>

</head>

<body>


<div id="module_list">
	<input type="hidden" id="orderlist" value="1,2,3,4,5,6,7,8,9" />
	<div class="modules" title="1">
		<h3 class="m_title">Module:1</h3>
		<p>1</p>
	</div>
		
	<div class="modules" title="2">
		<h3 class="m_title">Module:2</h3>
		<p>2</p>
	</div>

	<div class="modules" title="3">
		<h3 class="m_title">Module:3</h3>
		<p>3</p>
	</div>

	<div class="modules" title="4">
		<h3 class="m_title">Module:4</h3>
		<p>4</p>
	</div>
	
	<div class="modules" title="5">
		<h3 class="m_title">Module:5</h3>
		<p>5</p>
	</div>

	<div class="modules" title="6">
		<h3 class="m_title">Module:6</h3>
		<p>6</p>
	</div>

	<div class="modules" title="7">
		<h3 class="m_title">Module:7</h3>
		<p>7</p>
	</div>
	
	<div class="modules" title="8">
		<h3 class="m_title">Module:8</h3>
		<p>8</p>
	</div>

	<div class="modules" title="9">
		<h3 class="m_title">Module:9</h3>
		<p>9</p>
	</div>

	<div class="clear"></div>
</div>
</body>
</html>

JS代码(idrag.js):

// JavaScript Document$(function(){
	$(".m_title").bind('mouseover',function(){
	$(this).css("cursor","move")}
);
	var $show = $("#loader");
	//进度条 var $orderlist = $("#orderlist");
	var $list = $("#module_list");
	$list.sortable({
	opacity:0.6,revert:true,cursor:'move',handle:'.m_title',update:function(){
	var new_order = [];
	$list.children(".modules").each(function(){
	new_order.push(this.title);
}
);
	var newid = new_order.join(',');
	var oldid = $orderlist.val();
	$.ajax({
	type:"post",url:"update.php",data:{
	id:newid,order:oldid}
,//id:新的排列对应的ID,order：原排列顺序 beforeSend:function(){
	$show.html("<img src='../img/loading.gif' /> 正在更新");
}
,success:function(msg){
	//alert(msg);
	$show.html("");
}
}
);
}
}
);
}
);

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