首页 前端知识 jQuery UI sortable()实现拖动排序

jQuery UI sortable()实现拖动排序

2024-02-20 10:02:06 前端知识 前端哥 707 119 我要收藏

jQuery UI sortable()实现拖动排序

sortable()

  • <!DOCTYPE html>
    <html>
        <head>
            <title>jQuery UI sortable()实现拖动排序</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script src="http://tool.phpddt.com/resources/js/jquery-1.7.2.min.js"></script>
            <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        </head>
        <body>
           <script>
            $(function() {
              $( ".sortable" ).sortable({
              cursor: "move",
              items :"li",                        //只是li可以拖动
              opacity: 0.6,                       //拖动时,透明度为0.6
              revert: true,                       //释放时,增加动画
              update : function(event, ui){       //更新排序之后
                  alert($(this).sortable("toArray"));
              }
             });
           });
          </script>
          <ul class="sortable">
            <li class="ui-state-default"  id="1">第1项</li>
            <li class="ui-state-default"  id="2" >第2项</li>
            <li class="ui-state-default"  id="3">第3项</li>
          </ul>
        </body>
    </html>
     
    jQuery UI sortable参数:
    
  • 参数默认值作用
    axisfalse如果有设置,则元素仅能横向或纵向拖动。可选值:’x’, ‘y’
    cancelinput,textarea, button,select,option阻止排序动作在匹配的元素上发生
    connectWithfalse允许sortable对象连接另一个sortable对象,可将item元素拖拽到另一个中.(类型:Selector)
    containmentfalse约束排序动作只能在一个指定的范围内发生。可选值:DOM对象, ‘parent’, ‘document’, ‘window’, 或jQuery对象
    cursorauto定义在开始排序动作时,鼠标的样式。 如 cursor: “move”
    cursorAtfalse当开始移动时,元素的偏移的位置(最多两个方向)。可选值:{ top, left, right, bottom }。 如 cursorAt: {left:5,bottom:5}
    delay0以毫秒为单位,设置延迟多久才激活排序动作。此参数可防止误点击。 如 delay: 500
    distance1决定至少要在元素上面拖动多少像素后,才正式触发排序动作。 如 distance: 30
    dropOnEmptyfalse是否允許拖拽到一個空的sortable对象中。
    gridfalse每次移动都按一个格子大小移动,数组值:[x,y] 如 grid: [50, 20]
    handlefalse限制排序的动作只能在item元素中的某种元素 如 handle: ‘h2′
    helperoriginal设置是否在拖拽元素时,显示一个辅助的元素。可选值:‘original’, ‘clone’。 如 helper: ‘clone’
    items“> *” (第一级子元素)指定在排序对象中,哪些元素是可以进行拖拽排序的。 如 items: “> li”
    opacityfalse辅助元素(helper)显示的透明度 如 opacity: 0.6
    placeholderfalse设置当排序动作发生时,空白占位符的CSS样式 如 placeholder: ‘css-class-name’ (指定一个css的class)
    revertfalse如果设置成true,则被拖拽的元素在返回新位置时,会有一个动画效果
    scrollfalse如果设置成true,则元素被拖动到页面边缘时,会自动滚动。
    scrollSensitivity20设置当元素移动至边缘多少像素时,便开始滚动页面
    scrollSpeed20设置页面滚动的速度
    toleranceintersect设置当拖动元素越过其它元素多少时便对元素进行重新排序。可选值:’intersect’, ‘pointer’ intersect:至少重叠50% pointer:鼠标指针重叠元素
    zIndex1000设置在排序动作发生时,元素的z-index值

jQuery UI sortable事件:

  • 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) { … });

jQuery UI sortable方法:

  • 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’ )
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2365.html
标签
element-ui
评论
会员中心 联系我 留言建议 回顶部
复制成功!