编程 Javascript

jQuery之排序组件的深入解析

Posted in Javascript onJune 19, 2013

1：排序(Sortable)组件可以将页面上的一组元素变成可排序的，可用于定义一个可排序的元素列表，然后，通过拖动鼠标可以调整元素在列表中的位置
$('.selector').sortable(options);
简单实例：

<!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>sortable组件</title>
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.sortable.js"></script>
<link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
 text-align:center;
 margin:0 auto;
 padding:0;
}
#wrap {
 margin: 10px auto 10px auto;
 padding: 5px;
 width: 450px;
 height:300px;
 background: #fff;
 border: 5px solid #000;
}
h1 {
 color:#006;
 font-size:24px;
 font-weight:bold;
 margin-bottom:2px;
 text-align:center;
}
#sortable {
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 100%;
}
#sortable li {
 margin: 3px;
 padding: 0.4em;
 font-size: 16px;
 height: 18px;
}
#sortable li span {
 position: absolute;
 margin-left: -1.3em;
}
</style>
<script type="text/javascript">
 $(document).ready(function(){
  $("#sortable").sortable();    //将sortable变成可排序的
  $("#sortable").disableSelection();  //使文本不可被选中
 });
</script>
</head>
<body>
<div id="wrap">
  <h1>拖动鼠标调整下列选项的顺序</h1>
  <ul id="sortable">
    <li class="ui-widget-content">星期一</li>
    <li class="ui-widget-content">星期二</li>
    <li class="ui-widget-content">星期三</li>
    <li class="ui-widget-content">星期四</li>
    <li class="ui-widget-content">星期五</li>
    <li class="ui-widget-content">星期六</li>
    <li class="ui-widget-content">星期七</li>
  </ul>
</div>
</body>
</html>

效果图：

2：关联排序列表
通常将两个以上的列表同时进行排序称为关联排序列表，利用属性connectWidth属性设置一个选择符，这样就可以指定在不同的列表之间移动元素的顺序

<!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>sortable组件</title>
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.sortable.js"></script>
<link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.message_box {
 width:180px;
 height:200px;
 filter:dropshadow(color=#666666, offx=3, offy=3, positive=2);
 float:left;
 margin-right:10px;
}
#mask {
 position:absolute;
 top:0;
 left:0;
width:expression(body.clientWidth);
height:expression(body.clientHeight);
 background:#666;
 filter:ALPHA(opacity=60);
 z-index:1;
 visibility:hidden
}
.message {
 border:#036 solid;
 border-width:1 1 3 1;
 width:95%;
 height:95%;
 color:#036;
 font-size:12px;
 line-height:150%;
 background:#FFF
}
.header {
 background:#036;
 height:22px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 padding:3px 5px 0px 10px;
 color:#fff;
 cursor:move;
}
ul {
 margin-left:10px;
 margin-right:10px;
 background: #eee;
 padding: 5px;
 width: 150px;
}
li {
 font-size:14px;
}
.header div {
 display:inline;
 width:150px;
}
.header span {
 float:right;
 display:inline;
 cursor:hand;
}
.file, .folder {
 width: 60px;
 float: left;
 margin-right: 10px;
}
.file em, .folder em {
 clear: both;
 font-size: 12px;
 font-style: normal;
 text-decoration: underline;
}
.droppable {
 height:200px;
 overflow: auto;
}
#res {
 clear:both
}
</style>
<script type="text/javascript">
$(document).ready(function(){
 var msg = "";
 function callback(e, ui) {  
  if (e.type == "sortstart") {
   msg = "你选择了游戏：" + ui.item.text();
   $("#res").empty();
  } else if (e.type == "sortremove") {
   msg += "，从列表" + e.target.id;
  } else if (e.type == "sortreceive") {
   msg += "移至列表" + e.target.id + "。";
  } else if (e.type == "sortstop") {
   $("#res").append(msg);
  }
 }
 $("ul").sortable({  
  connectWith: "ul",
  start: callback,
  remove: callback,
  receive: callback,
  stop: callback
 }).disableSelection();
 $("#sortable2").sortable({ "dropOnEmpty":false});
});
</script>
</head>
<body>
<div id="message_box1" class="message_box" >
  <div class="message" >
    <div class="header">
      <div>休闲类小游戏</div>
      <span>×</span></div>
    <ul id="sortable1">
      <li>菠萝蛋糕 </li>
      <li>人品计算器 </li>
      <li>我的恐怖小屋</li>
      <li>品茗闻香话茶道 </li>
      <li>暴打火柴人中文版</li>
    </ul>
  </div>
</div>
<div id="message_box1" class="message_box" >
  <div class="message" >
    <div class="header">
      <div>动作类小游戏</div>
      <span>×</span></div>
    <ul id="sortable2">
      <li>奥特曼之狼人传说 </li>
      <li>企鹅战斗机 </li>
      <li>月蚀之刃</li>
      <li>终极拳皇 </li>
      <li>大满贯决赛 </li>
    </ul>
  </div>
</div>
<div id="message_box1" class="message_box" >
  <div class="message" >
    <div class="header">
      <div>精品游戏</div>
      <span>×</span></div>
    <ul id="sortable3">
    </ul>
  </div>
</div>
<div id="res"></div>
</body>
</html>

效果图：

3：排序组件的方法
3.1 serialize方法：该方法可以将可排序元素的id属性序列化为一个可提交的表单或者Ajax字符串，语法格式如下：
    $("#sortable").sortable(serialize", [options]);
3.2 toArray方法：该方法将可排序元素的id序列化为一个字符串数组，语法格式如下：
    $("#sortable").sortable("toArray");
3.3 refresh方法：方法用于刷新可排序列表
    $("#sortable").sortable("refresh");
3.4 refreshPositons方法：该方法用于刷新可排序元素的缓存位置，语法格式如下：
    $("#sortable").sortable("refreshPositions");
3.5 cancel：方法用于取消当前可排序对象中元素的顺序改变
    $("#sortable").sortable("cancel");

<!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>sortable组件</title>
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.sortable.js"></script>
<link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
 text-align:left;
 margin:0 auto;
 padding:0;
}
#wrap {
 margin: 10px auto 10px auto;
 padding: 5px;
 width: 380px;
 height:330px;
 background: #fff;
 border: 5px solid #000;
 float: left;
}
#result {
 margin: 10px;
 padding: 2px;
 width: 470px;
 height:330px;
 background: #fff;
 border: 1px solid #999;
 float: left;
}
h1 {
 color:#006;
 font-size:24px;
 font-weight:bold;
 margin-bottom:2px;
 text-align:center;
}
#sortable, #connect {
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 100%;
}
#sortable li, #connect li {
 margin: 3px;
 padding: 0.4em;
 font-size: 16px;
 height: 18px;
}
</style>
<script type="text/javascript">
 $(document).ready(function(){
  $("#sortable").sortable({connectWith: '#connect'});
  $("#connect").sortable();
  $("#sortable").disableSelection();
  $("#btn").click(function(){
   var result = $("#sortable").sortable('serialize', {
    connected: true,
    attribute: 'att', 
    key: 'att', 
    expression: /^(?:sort_)(.+)$/
    });
   $('#msg').html($('#msg').html() + result + '<br />');
  });
 });
</script>
</head>
<body>
<div id="wrap">
  <h1>调整下列课程的安排顺序</h1>
  <ul id="sortable">
    <li class="ui-widget-content" att="sort_1.1">1.1 链接外部.JS文件</li>
    <li class="ui-widget-content" att="sort_1.2">1.2 使用Microsoft脚本编辑器</li>
    <li class="ui-widget-content" att="sort_1.3">1.3 使用while循环</li>
    <li class="ui-widget-content" att="sort_1.4">1.4 使用for循环</li>
  </ul>
  <ul id="connect">
    <li class="ui-widget-content" att="sort_2.1">2.1 使用Switch语句</li>
    <li class="ui-widget-content" att="sort_2.2">2.2 使用Array对象属性</li>
    <li class="ui-widget-content" att="sort_2.3">2.3 使用String对象的方法</li>
    <li class="ui-widget-content" att="sort_2.4">2.4 使用Date对象的方法</li>
  </ul>
</div>
<div id="result">
  <input type="button" name="button" id="btn" value="确认修改" />
  <p id="msg"></p>
</div>
</body>
</html>

效果图：

这里将att作为键，值为布局中用att定义的字符串。
4：排序时间回调函数
可以通过定义回调函数来更灵活的控制排序操作
4.1 start: 事件类型为sortstart, 在开始排序时触发
4.2 sort: 事件类型为sort, 在排序过程中触发
4.3 change：事件类型为sortchange, 在排序过程中，当元素的位置发生改变时触发
4.4 beforestop: 事件类型为sortbeforestop，当停止排序但占位符或者辅助元素仍然可用时触发
4.5 stop：事件类型为sortstop,当排序过程停止时触发
4.6 update: 事件类型为sortupdate, 当停止排序过程且元素位置已经发生变化时触发
4.7 receive: 事件类型为sortreceive，当连接的排序列表已从另一个列表接收到一个元素时触发
4.8 remove: 事件类型为sortremove, 当从列表中移出一个可排序元素并将其放置到另一个列表时触发
4.9 over: 事件类型为sortover, 当一个可排序元素被移动到另一个连接列表中时触发
4.10 out: 事件类型为sortout, 当一个可排序元素被移出连接列表时触发
4.11 activate: 事件类型为sortactivate, 当使用连接的排序列表时触发，每个连接列表在拖动开始时均接收此事件
4.12 deactivate: 事件类型为sortdeactivate, 当停止排序操作时触发，此事件将传播到所有可能的连接列表

  $("#droppable").droppable({
      eventName: function(event, ui) {
      }
});

ui是一个包含附加信息的jQuery对象，该jQuery对象具有一下属性
helper: 一个jQuery对象，表示当前要排序的元素
position: 一个包含top属性和left属性的对象，表示当前元素相对于原始对象的位置
offset: 一个包含top属性和left属性的对象，表示当前元素相对于页面的绝对位置
item: 表示当前拖动的jQuery对象
placeholder: 表示定义的占位符
sender: 当前拖动元素所属的排序列表，仅适用于两个列表之间移动的情况

<!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>sortable组件</title>
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.sortable.js"></script>
<link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
 text-align:left;
 margin:0 auto;
 padding:0;
}
#wrap {
 margin: 10px auto 10px auto;
 padding: 5px;
 width: 300px;
 height:250px;
 background: #fff;
 border: 5px solid #000;
 float: right;
 overflow:scroll;
}
h1 {
 color:#006;
 font-size:24px;
 font-weight:bold;
 margin-bottom:2px;
 text-align:left;
}
#sortable {
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 300px;
 float: left;
}
#sortable li {
 margin: 3px;
 padding: 0.4em;
 font-size: 14px;
 height: 18px;
 text-align: left;
}
#sortable li span {
 position: absolute;
 margin-left: -1.3em;
}
#result {
 clear:both;
}
</style>
<script type="text/javascript">
 $(document).ready(function(){
  $("#sortable").sortable({
   cursor:"move",
   start:eventCallback,
   sort:eventCallback,
   stop:eventCallback,
   change:eventCallback,
   beforeStop:eventCallback,
   update:eventCallback,
  });
 function eventCallback(e, ui) {
  var content = "事件类型：" + e.type + "<br/>";
  var message = $("<span>").text(content);
  $("#wrap").append(content);
  var pos = $(".ui-widget-content").index(ui.item) + 1;
  if (e.type == "sortstart") {
   msg = "元素: " + ui.item.text() + "；排序前位置：" + pos;
  } else if (e.type == "sortstop") {
   msg += "；排序后位置：" + pos;
  }
  $("#result").text(msg);
 }
 $("#sortable").disableSelection();
 });
</script>
</head>
<body>
<h1>改变下面列车的顺序，查看事件触发结果</h1>
<ul id="sortable">
  <li class="ui-widget-content">K22次 始发站：桂林 -> 终点站：北京西 </li>
  <li class="ui-widget-content">K180次 始发站：郑州 -> 终点站：北京西 </li>
  <li class="ui-widget-content">K1038次  郑州  -> 终点站：深圳</li>
  <li class="ui-widget-content">K236次  石家庄  -> 终点站：上海 </li>
  <li class="ui-widget-content">T182次 汉口  -> 终点站：哈尔滨</li>
  <li class="ui-widget-content">K926次  郑州  -> 终点站：哈尔滨</li>
</ul>
<div id="wrap"></div>
<div id="result"></div>
</body>
</html>

jQuery之排序组件的深入解析

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery Ajax提交表单查询获得数据实例代码

Sep 19 Javascript

js判断文本框剩余可输入字数的方法

Feb 04 Javascript

jQuery实现高亮显示的方法

Mar 10 Javascript

Node.js编程中客户端Session的使用详解

Jun 23 Javascript

谈一谈JS消息机制和事件机制的理解

Apr 14 Javascript

Ionic默认的Tabs模板使用实例

Aug 29 Javascript

Vue2单一事件管理组件通信

May 09 Javascript

浅谈Vue.js 1.x 和 2.x 实例的生命周期

Jul 25 Javascript

JavaScript事件委托原理与用法实例分析

Jun 07 Javascript

vue+element的表格实现批量删除功能示例代码

Aug 17 Javascript

快速解决vue-cli在ie9+中无效的问题

Sep 04 Javascript

JS实现骰子3D旋转效果

Oct 24 Javascript

jQuery之日期选择器的深入解析

Jun 19 #Javascript

jQuery之按钮组件的深入解析

Jun 19 #Javascript

jQuery之自动完成组件的深入解析

Jun 19 #Javascript

jQuery之折叠面板的深入解析

Jun 19 #Javascript

jQuery之选择组件的深入解析

Jun 19 #Javascript

解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述

Jun 19 #Javascript

JavaScript中把数字转换为字符串的程序代码

Jun 19 #Javascript