jquery 拖拽排序拖动
来源:互联网 发布:ees软件下载 编辑:程序博客网 时间:2024/05/18 20:53
<!DOCTYPE html>
<html>
<head>
<meta content='jQuery可拖动排序插件HTML5 Sortable 演示页面 - 给力技术' name='description'>
<meta content='html5,jquery,插件,plugin,轻量级,拖动,演示' name='keywords'>
<meta content='Lwolf' name='author'>
<title>jQuery可拖动排序插件 - HTML5 Sortable 演示页面 >> 给力技术</title>
<!--演示页面的CSS样式-->
<link rel="stylesheet" href="css.css" />
<style>
section {
display: block;
}
h1, h2 {
text-align: center;
font-weight: normal;
}
.connected, .sortable, .exclude, .handles {
margin: auto;
padding: 0;
width: 310px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sortable.grid {
overflow: hidden;
}
.connected li, .sortable li, .exclude li, .handles li {
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
font-family: "Tahoma";
color: #1C94C4;
margin: 5px;
padding: 5px;
height: 22px;
}
.sortable.grid li {
line-height: 80px;
float: left;
width: 80px;
height: 80px;
text-align: center;
}
li.highlight {
background: #FEE25F;
}
#connected {
width: 440px;
overflow: hidden;
margin: auto;
}
.connected {
float: left;
width: 200px;
}
.connected.no2 {
float: right;
}
li.sortable-placeholder {
border: 1px dashed #CCC;
background: none;
}
</style>
</head>
<body>
<div class='content'>
<br />
<h2><b>jQuery可拖动排序插件 - HTML5 Sortable 演示页面</b></h2>
拖动以下列表项试试~~~
<section>
<h2>Sortable Grid</h2>
<ul class="sortable grid">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</section>
<section id="connected">
<h2>Connected Sortable Lists</h2>
<ul class="connected list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<ul class="connected list no2">
<li class="highlight">Item 1</li>
<li class="highlight">Item 2</li>
<li class="highlight">Item 3</li>
<li class="highlight">Item 4</li>
<li class="highlight">Item 5</li>
<li class="highlight">Item 6</li>
</ul>
</section>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.sortable.js"></script>
<script>
$(function () {
$('.sortable').sortable();
$('.connected').sortable({
connectWith: '.connected'
});
});
</script>
</body>
</html>
很多网站的拖动布局的例子都是采用浏览器的COOKIE来记录用户拖动模块的位置,也就是说拖动后各模块的排序位置信息是记录在客户端的cookie里的。当用户清空客户端的cookie或浏览器的cookie过期后,再次访问页面时,发现布局又还原成最初的状态。这种cookie记录的方式使用简单,但不适合像个人中心、管理系统主页的要求。
本例实现的效果:
- 通过拖动随意布局页面模块。
- 记录拖动后模块的位置,并记录到数据库中。
- 页面永久性布局,用任意浏览器在任意时候打开,页面布局不变。(除非用户再次更改模块的排序,跟cookie没有关系)。
原理
采用jquery ui的sorttable拖动排序插件实现拖动效果。
将拖动后的模块的位置通过ajax传给服务端PHP程序。
PHP程序处理位置信息后,更新数据库中相应的字段内容。
XHTML
<div id="loader"></div>
<div id="module_list">
<input type="hidden" id="orderlist" />
<div class="modules" title="1">
<h3 class="m_title">Module:1</h3>
<p>1</p>
</div>
...
</div>
DIV#loader用于显示提示信息,如loading...,#orderlist是一个隐藏域,用于记录模块的排序值。“...”表示循环了n个DIV.modules,具体生成的代码在后面会讲到。
CSS
#module_list{margin-left:4px}
.modules{float:left; width:200px; height:140px; margin:10px; border:1px solid #acc6e9;
background:#e8f5fe}
.m_title{height:24px; line-height:24px; background:#afc6e9}
#loader{height:24px; text-align:center}
简单,关键是要给.modules一个想左浮动的样式float:left。
jQuery
$(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='load.gif' /> 正在更新");
},
success: function(msg) {
//alert(msg);
$show.html("");
}
});
}
});
});
拖动排序的动作都写在$list.sortable({...})里面,参数设置和方法请看代码的注释。juery ui的sortable插件提供了很多方法和参数配置,详情请查看http://jqueryui.com/demos/sortable
拖动完成要执行一个update方法,该方法需要将拖动后排序的位置通过ajax提交给后台处理。
var new_order = [];
$list.children(".modules").each(function() {
new_order.push(this.title);
});
var newid = new_order.join(',');
var oldid = $orderlist.val();
说明:循环每个模块.modules,获取拖动排序后每个模块的属性title值,将值通过逗号连接成一个字符串。原来的未拖动之前的排序值从隐藏域orderlist中获取。
获取排序值后,就是通过ajax和后台程序交互了。
PHP
update.php接收前端ajax通过POST提交过来的两个参数,及排序前的值和排序后的值,将这连个值进行对比,如果不相等,则更新数据库中的排序字段,完成了拖动排序后的及时保存。
include_once("connect.php");//连接数据库
$order = $_POST['order'];
$itemid = trim($_POST['id']);
if (!empty ($itemid)) {
if ($order != $itemid) {
$query = mysql_query("update sortlist set sort='$itemid' where id=1");
if ($query) {
echo $itemid;
} else {
echo "none";
}
}
}
首页index.php
再回到展示布局的首页index.php。index.php通过连接数据库读取模块的排序信息,并将各模块显示出来。
首先别忘了加载jquery库和jquery ui的sortable拖动排序插件。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
读取数据库的排序字段值。
include_once("connect.php");
$query=mysql_query("select * from sortlist where id=1");
if($rs=mysql_fetch_array($query)){
$sort=$rs['sort'];
}
$sort_arr=explode(",",$sort);
$len=count($sort_arr);
循环显示各模块。
<div id="loader"></div>
<div id="module_list">
<input type="hidden" id="orderlist" value="<?php echo $sort;?>" />
<?php
for($i=0;$i<$len;$i++){
?>
<div class="modules" title="<?php echo $sort_arr[$i]; ?>">
<h3 class="m_title">Module:<?php echo $sort_arr[$i]; ?></h3>
<p><?php echo $sort_arr[$i]; ?></p>
</div>
<?php } ?>
</div>
- jquery 拖拽排序拖动
- jquery 拖动排序|拖拽
- jquery实现拖动排序
- jquery,div层拖动,排序
- jquery对元素拖动排序
- jquery ui的拖动排序
- jquery 拖动排序插件tableDnD
- 表格拖动排序jquery-ui
- jquery ui(六)拖动排序 sortable
- jquery 鼠标拖动排序Li或Table
- jQuery UI 实例 - 拖动排序(Sortable)
- jQuery实现拖动排序并将排序结果保…
- jQuery拖动布局实现排序结果同步数据库
- jQuery拖动布局实现排序结果同步数据库
- java + jquery-ui.sortable.js插件实现表格拖动排序
- jquery-ui 拖拽排序
- jquery 拖动图层
- jquery鼠标拖动特效
- PHP写入txt文件换行
- 新浪微博开放平台接口使用小结
- mongodb 学习路线
- Highcharts属性与Y轴数据值刻度显示Y轴最小最大值
- 新浪微博登录API写法
- jquery 拖拽排序拖动
- chrome调试工具F12方式javascript(js调试)jqueryui拖拽
- JQuery UI的拖拽功能(转
- svn源码同步hooks
- nginx查看配置文件nginx.conf路径
- php根据某年某月获取该月天数
- 查看嵌入式的linux下的SO依赖关系。
- [dg]$navinfor[id][/dg]帝国CMS标签
- kohana调用自定义类-使用config配置文件