鼠标交互

拖动元素

draggable(options)：散列对象，如果省略参数则元素在窗体任意拖动

当元素成为可拖动元素时，类ui-draggable被添加到这个元素。在拖动过程会添加类ui-draggable-dragging。

参数：addClasses  appendTo  axis  cancel  connectToSortable  containment  cursor  cursorAt  delay  distance  drag  grid  handle  helper  iframeFix  opacity  refreshPositions

revert  revertDuration  scope  scroll  scrollSensitivity  snap  snapMode  snapTolerance  Stack  start  stop  zIndex

droppable(‘enable‘)

droppable(‘disable‘)

droppable(‘destory‘)

droppable(‘option‘, optionName, value)

可拖动事件

除了在options对象中设置start、drag、end选项创建事件处理器外还可以直接创建

dragstart   drag   dragend

可以在可拖动元素祖先层次的任何元素创建这些处理器，创建后会向处理器传递2个参数：鼠标事件实例和包含拖动事件当前状态的信息。后者的参数有：helper、position、offset。

可拖动性

draggable(‘enable‘)：重新启用包装集中可拖动元素的可拖动性

draggable(‘disable‘)：禁用包装集可拖动元素的可拖动性

draggable(‘destory‘)：删除包装集元素的可拖动性

draggable(‘option‘, optionName, value)：

‘option‘：基于剩余的参数，设置或获取包装集所有元素或第一个元素的选项值

optionName：要设置或返回的选项名称的值，如果提供value参数，则这个值成为选项的值

value：要设置的选项的值

放置可拖动元素

droppable(options):根据指定的选项使包装集的元素可放置

参数：

可放置事件

dropactivate：开始拖动被可放置元素所接收额可拖动元素时触发

dropover：当可接收的可拖放元素悬停在可放置元素上方时触发

dropout：可拖动元素移除可放置元素区域时触发

dropdeactivate：正在进行的放置操作终止时触发

drop：拖动操作终止（在可拖动元素悬停在可放置元素时）时触发

所有处理器都接收两个参数：鼠标事件实例和包含拖放擦做当前窗体信息的对象。对象的属性：helper  draggable  position  offset

排序

sortable(options)

sortable(‘enable‘)

sortable(‘disable‘)

sortable(‘destory‘)

sortable(‘option‘, optionName, value)

sortable(‘cancel‘):取消当前的排序操作

sortable(‘refresh‘)：触发可排序元素中的项目重新加载。会导致添加到可排序列表的新项目被识别

sortable(‘refreshPositions‘)：在内部刷新可排序元素的缓存信息。

sortable(‘serialize‘)：从可排序元素返回一个序列号的查询字符串

sortable(‘toArray‘)：返回可排序元素的id按照顺序组成的数组

选项：activate  appendTo  axis  beforeStop  cancel  change  connectWith  containment   cursor   cursorAt   deactivate  delay  distance  dropOnEmpty  forceHelperSize  forcePlaceholderSize

grid  handle  helper  items  opacity  out  over  placeholder  receive  remove  revert  scroll  scrollSensitivity  scrollSpeed  sort  start  stop  tolerance  update  zIndex

连接可排序的元素

connectWith

     //b中的元素能移动到a
     $( "#a" ).sortable();
     $(‘#b‘).sortable({
         connectWith:‘#a‘
         });

可以在列表中包含所有可能的列，并允许用户从列表拖动他们需要的列到第二列

可排序事件

很多只在涉及连接的列表操作时才触发，只在单个列表排序操作触发的事件比较少。

获取排序的顺序

sortable(‘toArray‘)：返回包含排序项目id值的javascript数组

sortable(‘serialize‘)：返回一个适合作为查询字符串或请求主体的字符串

改变元素的尺寸

resizable(options)

resizable(‘enable‘)

resizable(‘disable‘)

resizable(‘destory‘)

resizable(‘option‘, optionName, value)

选项：alsoResize  animate  animateDuration  animateEasing  aspectRadio  autoHide  cancel  containment  dalay  distance  ghost  grid  handles  helper  maxHeight  maxWidth  minHeight

minWidth  resize  start  stop

改变尺寸事件

resizeStart

resize

resizeStop

参数：事件、自定义对象{position、size、originalPosition、helper}

为手柄添加样式

创建手柄时，会向其添加类名ui-resizable-handle和ui-resizable-xx。东南角接受类名ui-icon和ui-icon-gripsmall-diagonal-se来创建手柄图标。

使元素可选择

可以通过跨元素拖出矩形选取可选择多个相邻的元素，也可以按下Ctrl键向已选择元素集合添加新元素。

当DOM元素成为可选择元素时，这些元素添加类ui-selectee，选中状态会添加类ui-selected。

selectable(options)

selectable(‘enable‘)

selectable(‘disable‘)

selectable(‘option‘, optionName, value)

selectable(‘refresh‘)：更新可选择元素的尺寸和位置。主要用于禁用autoRefresh选项

选项：autoRefresh  cancel  delay  distance  filter  selected  selecting  start  stop  tolerance  unselected  unselecting

可选择事件

查找已选择和可选择的元素

最经常绑定的事件是selectablestop，会在选择事件发生和结束后通知我们。

每个选择的元素都被标记了类名ui-selected。如果只获取选择的<div>元素$(‘div.ui-selected‘)