`
dearkerwin
  • 浏览: 7934 次
社区版块
存档分类
最新评论

jquery ui(六)拖动排序 sortable

阅读更多

jquery ui 的另一个强大的功能就是拖动排序,也就是通过鼠标的拖到,实现对一些元素的排序。
废话少说,用实例说话。

一、简单的实例

下面是对一组li元素进行排序的实例

1、代码

  <style>
  //为了展示的效果更好,增加了一些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)拖拽排序之前

jquery-ui-sortable 拖拽之前截图 -- ifxoxo.com

jquery-ui-sortable 拖拽之前截图 — ifxoxo.com

(2)拖拽排序的过程

jquery-ui-sortable 拖拽过程截图 -- ifxoxo.com

jquery-ui-sortable 拖拽过程截图 — ifxoxo.com

(3)拖拽排序之后

jquery-ui-sortable 拖拽排序之后 -- ifxoxo.com

jquery-ui-sortable 拖拽排序之后 — ifxoxo.com

二、具体实现

1、需要加载文件

(1)jquery.js
(2)jquery.ui
(3)jquery.ui的css

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<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 >等元素, 它的直接子节点将可以被拖拽排序

 <ul id="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>
//或者
<div id="sortable">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
</div>

3、js代码

最简单的初始化函数:

$(.selecter).sortable()

(它支持很多参数,详见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、一个稍微复杂一点的例子:

//效果: 每次排序之后,按顺序把每一项的ID输出来
<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>
截图如下:
展示排序结果--ifxoxo.com

展示排序结果–ifxoxo.com

三、其他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的拖拽排序插件 jquery-ui-sortable.js

    jqueryUI拖拽排序插件,单独的插件,可以独立使用!不必引入整个jqueryUi框架就可使用

    Jquery Sortable实现div拖动排序效果

    本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。 首先,你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库,而 jQuery UI 提供了包括Sortable在内的多种...

    jQuery UI可拖拽排序的时间行程表

    在时间行程表插件中,jQuery UI的拖放(Draggable)和排序(Sortable)功能被用来实现日程项的拖拽和重新排序。拖放功能允许用户抓取一个元素并将其移动到新的位置,而排序功能则确保了在拖放过程中元素之间的顺序...

    jquery ui实现拖动排序

    《jQuery UI实现拖动排序详解》 在网页开发中,我们常常需要实现用户可以自由调整元素顺序的功能,比如列表项的拖动排序。jQuery UI库提供了一种简单易用的解决方案,即Draggable和Droppable组件,可以方便地实现...

    经过修改,适合bootstrap table拖动排序的jQuery-UI sortable

    经过修改,适合bootstrap table拖动排序的jQuery-UI sortable

    jquery ui sortable拖拽后保存位置

    jquery ui sortable是一种基于jquery ui库的插件,它为DOM元素提供了一个强大的拖放界面,可以实现列表和网格的拖拽排序。通过jquery ui sortable,用户可以轻松地对页面上的元素进行拖拽排序,而无需编写复杂的...

    jquery div拖动排序效果代码.zip

    本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果,结合CSS样式,创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先,我们需要在HTML中设置好基础结构。创建一系列的div元素,每个div代表一个...

    jQuery实现拖拽排序插件Sortable.js.zip

    Sortable.js 是一个基于 jQuery 的轻量级拖拽排序插件,它使得在网页上通过鼠标拖放元素进行排序变得简单易行。这个插件适用于那些需要动态调整列表顺序的场景,比如任务管理器、购物车或者任何需要用户自定义顺序的...

    JQueryUI拖拽效果

    拖拽效果可以与jQueryUI的其他组件,如`droppable()`(可放置区域)和`sortable()`(可排序列表)配合使用,实现更复杂的交互。例如,将一个元素从一个可拖动列表拖放到另一个可放置的列表,可以实现元素的动态分配...

    jQuery排序插件html5sortable.zip

    HTML5 Sortable 是一个 jQuery 插件,使用本地拖拽 API 来创建可排序的列表和网格。 特性: 小于 1KB (简化和压缩 ) 使用本地的拖拽 API 支持列表和网格风格的布局 类似 jQuery-UI 可排序插件...

    jQuery UI表格内容拖拽代码.zip

    《jQuery UI表格内容拖拽功能实现详解》 在网页开发中,交互性的增强往往能提升用户的体验感。jQuery UI库提供了丰富的组件和效果,其中就包括了表格内容的拖拽功能。本文将深入探讨如何利用jQuery UI实现表格内容...

    Jquery Ui 后台模板界面

    jQuery UI 的 Draggable 和 Sortable 插件使得元素可以被轻松地拖动到不同位置,甚至可以在多个容器之间进行排序,提高了后台操作的灵活性。 **4. 下拉菜单和按钮** jQuery UI 提供了多种风格的下拉菜单和按钮,...

    jQuery UI组件 jQuery UI

    9. **Sortable(可排序)**:用于列表或表格元素的排序,用户可以通过拖拽调整元素顺序。 10. **Autocomplete(自动补全)**:在输入框中输入时,自动给出匹配的建议列表,提高用户输入效率。 ### 使用方法 ...

    jquery-ui.css、jquery-ui.js下载

    jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件,包括但不限于对话框(Dialogs)、日期选择器(Datepickers)、拖放功能(Drag and Drop)、排序功能(Sortable)以及各种可自定义...

    jQuery拖拽插件制作拖拽排序特效.zip

    现在,我们可以使用jQuery UI的`draggable`和`sortable`方法,使列表项具有拖拽排序功能: ```javascript $(function() { $("#draggableList").sortable({ stop: function(event, ui) { // 在排序停止时,更新...

    jquery ui & themes

    3. **拖放(Draggable/Droppable)**:jQuery UI实现了元素的拖放功能,允许用户将一个元素拖动到另一个元素上,常用于构建可交互的布局或者文件管理器等应用。 4. **排序(Sortable)**:这个功能允许用户对列表或...

    基于jquery ui的Ajax排序功能实现鼠标拖动排序并获得排列顺序.zip

    这个压缩包文件 "基于jquery ui的Ajax排序功能实现鼠标拖动排序并获得排列顺序.zip" 提供了一个使用 jQuery UI 和 Ajax 技术实现的拖动排序功能的示例。下面将详细介绍如何实现这一功能。 首先,jQuery UI 的 `...

    jQuery表格列表拖动排序代码.zip

    jQuery UI库提供了一个名为Sortable的组件,它能够轻松地实现列表或表格的拖动排序。使用Sortable,只需几步简单的配置即可实现拖动排序功能: 1. 引入jQuery UI库及相关CSS样式文件。 2. 对目标表格或列表应用`....

    ,jqueryui jquery ui包 效果不错,只是为了自己保存

    jQuery UI是一个基于jQuery JavaScript库的扩展,它提供了一整套可交互的用户界面组件,包括对话框、拖放功能、日期选择器、进度条、排序列表等。这个名为"jquery-ui-1.8.4.custom"的压缩包包含了jQuery UI的自定义...

    通过jquery-ui中的sortable来实现拖拽排序的简单实例

    ### 使用jQuery UI的sortable实现拖拽排序功能 在开发动态交互的网页时,经常需要实现元素拖拽排序的功能,以便用户能够按照自己的需求排列页面元素。jQuery UI作为jQuery的一个扩展库,提供了很多界面交互功能,...

Global site tag (gtag.js) - Google Analytics