jquery ui 的另一个强大的功能就是拖动排序,也就是通过鼠标的拖到,实现对一些元素的排序。
废话少说,用实例说话。
一、简单的实例
下面是对一组li元素进行排序的实例
1、代码
//为了展示的效果更好,增加了一些css样式
.sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
.sortable li { margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor: move ; }
.sortable li span { position: absolute; margin-left: -1.3em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
</style>
<script>
$(function() {
$( ".sortable" ).sortable();
});
</script>
<ul class="sortable">
<li class="ui-state-default">Item 1--ifxoxo.com</li>
<li class="ui-state-default">Item 2--ifxoxo.com</li>
<li class="ui-state-default">Item 3--ifxoxo.com</li>
</ul>
2、截图
(1)拖拽排序之前
(2)拖拽排序的过程
(3)拖拽排序之后
二、具体实现
1、需要加载文件
(1)jquery.js
(2)jquery.ui
(3)jquery.ui的css
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
rel="stylesheet" />
2、页面上的HTML代码
需要一个< div >或者< ul >等元素, 它的直接子节点将可以被拖拽排序
<li class="ui-state-default">Item 1--ifxoxo.com</li>
<li class="ui-state-default">Item 2--ifxoxo.com</li>
<li class="ui-state-default">Item 3--ifxoxo.com</li>
</ul>
//或者
<div id="sortable">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
3、js代码
最简单的初始化函数:
(它支持很多参数,详见4)
4、sortable的参数
(为了更好的解释一些参数,有一个复杂的示例,详见6)
参数 | 默认值 | 作用 |
axis | false | 如果有设置,则元素仅能横向或纵向拖动。可选值:’x', ‘y’ |
cancel | input,textarea, button,select,option |
阻止排序动作在匹配的元素上发生 |
connectWith | false | 允许sortable对象连接另一个sortable对象,可将item元素拖拽到另一个中.(类型:Selector) |
containment | false | 约束排序动作只能在一个指定的范围内发生。可选值:DOM对象, ‘parent’, ‘document’, ‘window’, 或jQuery对象 |
cursor | auto | 定义在开始排序动作时,鼠标的样式。 如 cursor: “move” |
cursorAt | false | 当开始移动时,元素的偏移的位置(最多两个方向)。可选值:{ top, left, right, bottom }。 如 cursorAt: {left:5,bottom:5} |
delay | 0 | 以毫秒为单位,设置延迟多久才激活排序动作。此参数可防止误点击。 如 delay: 500 |
distance | 1 | 决定至少要在元素上面拖动多少像素后,才正式触发排序动作。 如 distance: 30 |
dropOnEmpty | false | 是否允許拖拽到一個空的sortable对象中。 |
grid | false | 每次移动都按一个格子大小移动,数组值:[x,y] 如 grid: [50, 20] |
handle | false | 限制排序的动作只能在item元素中的某种元素 如 handle: ‘h2′ |
helper | original | 设置是否在拖拽元素时,显示一个辅助的元素。可选值:‘original’, ‘clone’。 如 helper: ‘clone’ |
items | “> *” (第一级子元素) | 指定在排序对象中,哪些元素是可以进行拖拽排序的。 如 items: “> li” |
opacity | false | 辅助元素(helper)显示的透明度 如 opacity: 0.6 |
placeholder | false | 设置当排序动作发生时,空白占位符的CSS样式 如 placeholder: ‘css-class-name’ (指定一个css的class) |
revert | false | 如果设置成true,则被拖拽的元素在返回新位置时,会有一个动画效果 |
scroll | false | 如果设置成true,则元素被拖动到页面边缘时,会自动滚动。 |
scrollSensitivity | 20 | 设置当元素移动至边缘多少像素时,便开始滚动页面 |
scrollSpeed | 20 | 设置页面滚动的速度 |
tolerance | intersect | 设置当拖动元素越过其它元素多少时便对元素进行重新排序。可选值:’intersect’, ‘pointer’ intersect:至少重叠50% pointer:鼠标指针重叠元素 |
zIndex | 1000 | 设置在排序动作发生时,元素的z-index值 |
5、事件和方法
(为了更好的解释一些事件和方法,有一个复杂的示例,详见6)
(1)事件
start
当排序动作开始时触发此事件。
定义:$(‘.selector’).sortable({ start: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortstart’, function(event, ui) { … });
sort
当元素发生排序时触发此事件。
定义:$(‘.selector’).sortable({ sort: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sort’, function(event, ui) { … });
change
当元素发生排序且坐标已发生改变时触发此事件。
定义:$(‘.selector’).sortable({ change: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortchange’, function(event, ui) { … });
beforeStop
当排序动作结束之前触发此事件。此时占位符元素和辅助元素仍有效。
定义:$(‘.selector’).sortable({ beforeStop: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortbeforeStop’, function(event, ui) { … });
stop
当排序动作结束时触发此事件。
定义:$(‘.selector’).sortable({ stop: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortstop’, function(event, ui) { … });
update
当排序动作结束时且元素坐标已经发生改变时触发此事件。
定义:$(‘.selector’).sortable({ update: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortupdate’, function(event, ui) { … });
receive
当一个已连接的sortable对象接收到另一个sortable对象的元素后触发此事件。
定义:$(‘.selector’).sortable({ receive: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortreceive’, function(event, ui) { … });
over
当一个元素拖拽移入另一个sortable对象后触发此事件。
定义:$(‘.selector’).sortable({ over: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortover’, function(event, ui) { … });
out
当一个元素拖拽移出sortable对象移出并进入另一个sortable对象后触发此事件。
定义:$(‘.selector’).sortable({ out: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortout’, function(event, ui) { … });
activate
当一个有使用连接的sortable对象开始排序动作时,所有允许的sortable触发此事件。
定义:$(‘.selector’).sortable({ activate: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortactivate’, function(event, ui) { … });
deactivate
当一个有使用连接的sortable对象结束排序动作时,所有允许的sortable触发此事件。
定义:$(‘.selector’).sortable({ deactivate: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortdeactivate’, function(event, ui) { … });
(2)方法
destory
从元素中移除拖拽功能。
用法:.sortable( ‘destroy’ )
disable
禁用元素的拖拽功能。
用法:.sortable( ‘disable’ )
enable
启用元素的拖拽功能。
用法:.sortable( ‘enable’ )
option
获取或设置元素的参数。
用法:.sortable( ‘option’ , optionName , [value] )
serialize
获取或设置序列化后的每个item元素的id属性。
用法:.sortable( ‘serialize’ , [options] )
toArray
获取序列化后的每个item元素的id属性的数组。
用法:.sortable( ‘toArray’ )
refresh
手动重新刷新当前sortable对象的item元素的排序。
用法:.sortable( ‘refresh’ )
refreshPositions
手动重新刷新当前sortable对象的item元素的坐标,此方法可能会降低性能。
用法:.sortable( ‘refreshPositions’ )
cancel
取消当前sortable对象中item元素的排序改变。
用法:.sortable( ‘cancel’ )
6、一个稍微复杂一点的例子:
<style>
.sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
.sortable li { margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor: move ;}
.sortable li span { position: absolute; margin-left: -1.3em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
</style>
<script>
$(function() {
$( ".sortable" ).sortable({
placeholder: "ui-state-highlight" , //拖动时,用css
cursor: "move",
items :"li", //只是li可以拖动
opacity: 0.6, //拖动时,透明度为0.6
revert: true, //释放时,增加动画
update : function(event, ui){ //更新排序之后
var text= "排序为:";
$(".sortable li").each(function(){
text = text + $(this).attr("id") + " " ;
})
alert(text); //把排序的ID弹出
}
});
});
</script>
<ul class="sortable">
<li class="ui-state-default" id="item-1">Item 1--from ifxoxo.com</li>
<li class="ui-state-default" id="item-2" >Item 2--from ifxoxo.com</li>
<li class="ui-state-default" id="item-3">Item 3--from ifxoxo.com</li>
<div class="ui-state-default"> Div 4 -- from <a href="ifxoxo.com">ifxoxo.com</a></div>
</ul>
截图如下:
三、其他jquery ui 文章
1、jquery ui(一)简介
2、jquery ui(二)拖拽 draggable和droppable
3、jquery ui(三)弹出窗口 dialog
4、jquery ui(四)进度条 progressbar
5、jquery ui(五)日期选择器 datepicker
6、jquery ui(六)拖动排序 sortable
相关推荐
jqueryUI拖拽排序插件,单独的插件,可以独立使用!不必引入整个jqueryUi框架就可使用
经过修改,适合bootstrap table拖动排序的jQuery-UI sortable
HTML5 Sortable 是一个 jQuery 插件,使用本地拖拽 API 来创建可排序的列表和网格。 特性: 小于 1KB (简化和压缩 ) 使用本地的拖拽 API 支持列表和网格风格的布局 类似 jQuery-UI 可排序插件...
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。 编辑本段组件构成 jQuery UI ...
下面小编就为大家带来一篇通过jquery-ui中的sortable来实现拖拽排序的简单实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jqueryUI sortable 可以用来进行页面拖拽布局,然而有一个小问题就是拖拽后如何保存状态。 工作中遇到了这个情况,遍把这个问题记了下来,具体思路是: 利用拖拽stop后利用 var arr = $( “.sortable” ).sortable...
最新官方jQuery UI插件 主流特效Demo,绝不含糊。 好东西不需要过多的言辞修饰,下了就知道! 所有效果说明: 基本的鼠标互动: 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种...
通过鼠标拖动来改变div的顺序,来实现指标的排序。使用了Jquery,jquery-ui.js,sortable,自己原创,效果很绚。 配合ThinkPHP可以实现把数据入库,由于使用的是ubuntu, 文件编码格式都是utf-8.
在jquery-ui插件的sortable方法上进行了改造,支持多行拖拽排序,并且跨列后可以接近边缘时进行滚动。
本文为大家分享了jQuery ui插件sortable实现自由拖动排序的具体方法,供大家参考,具体内容如下 此为网上资源demo自己做了修改,记录下方便日后的学习。 效果展示: 代码展示: <!doctype html> <...
jquery.ui.min~draggble~droppable~sortable.js draggble~droppable~sortable 这三个都是难找的资源 界面拖拽或智能选择功能必备插件 一次性放出来...
classes: {"ui-sortable": "highlight"}, //设置排序元素样式 connectWith: ".distination", //多个排序元素间互相拖拽排序 //containment : "#content1", //排序容器,拖拽不能超出容器范围 //cursorAt : {...
项目需求,添加列表可拖拽排序功能,谷歌了一下,找到一个Angular的插件:angular-ui-sortable,项目地址:https://github.com/angular-ui/ui-sortable 需要在之前引入jquery,和jquery-ui,否则无法使用。 我们要做...
在JQuery UI Sortable上模拟拖动尽管提供了模拟许多JQuery和JQuery UI事件的功能,但由于使JQuery UI Sortable小部件触发正确事件所需的复杂行为,因此它无法为JQuery UI Sortable小部件模拟拖动事件。 这个库允许您...
交互部件是一些与鼠标交互相关的内容,包括缩放(Resizable) , 拖动(Draggable) , 放置(Droppable) , 选择(Selectable) , 排序(Sortable)等。 小部件(Widgets) 主要是一些界面的扩展,包括折叠面板...
Query UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容 IE 6.0+, ...
摘要:脚本资源,Ajax/JavaScript,jQueryUI,Ajax排序 jQuery UI动态拖动排列菜单,锋利的JQuery一书中的jQueryUI-sortable实例,动态获得排列顺序sortable,用鼠标在对应菜单项上拖动,会自动排列菜单,按照你想要的...