jQuery UI sortable()实现拖动排序

jQuery UI sortable()实现拖动排序

sortable()

• 
  
      
          
          
          
          
      
      
         
        
  
          
  第1项
          
  第2项
          
  第3项
        
      
  
   
  jQuery UI sortable参数：
  

• 参数	默认值	作用
  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值

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’ )