对jQuery排序的拖动方法实例详细解释

所有事件回调函数都有两个参数：事件和UI、浏览器具有事件对象和封装的UI对象。
ui.helper -表示排序元素的jQuery对象，通常克隆对象的当前元素
ui.position表示相对当前对象，鼠标的坐标值对象{左}，
ui.offset代表坐标值对象{上面，鼠标的相对于当前页面左左} }，
ui.item -代表当前拖动元素
ui.placeholder -占位符（如果定义）
ui.sender -排序的对象是目前拖动拖动元素（有用的只有当元素是通过从另一个可选择的对象）

参数（参数名称：参数类型：默认值）
appendto：字符串：'parent
定义添加鼠标移动的助手的位置。
初始：$（'选择'）。排序（{ appendto：'body}）；
采集：VaR appendto = $（'选择'）。排序（'option'，'appendto）；
设置：$（'选择'）。排序（'option'，'appendto '，'body）；

轴：字符串：false
如果它被设置，该元素只能被拖的横向或纵向。可选值：X，Y
初始：$（'选择'）。排序（x轴：{ }）；
采集：var = $（轴。选择器）。排序（'option'，'axis）；
设置：$（'选择'）。排序（'option'，'axis'、‘X'）；

取消：选择器：输入，按钮
防止在匹配元素上发生排序操作。
初始：$（'选择'）。排序（{取消按钮}）；
采集：VAR取消=美元（'选择'）。排序（'option'，'cancel）；
设置：$（'选择'）。排序（'option'，'cancel '按钮'）；

连接：选择：假
排序对象允许连接到另一个合适的对象，可以拖拖到另一个项目元。
初始：$（'选择'）。排序（{显示：'。otherlist}）；
采集：VaR与= $（'选择'）。排序（'option'，'connectwith）；
设置：$（'选择'）。排序（'option'，'connectwith '、'。otherlist）；

包含：元素、字符串、选择器：false
约束排序操作只能在指定的范围内发生。可选值：DOM对象，'parent '，'document、'，或者jQuery对象
初始：$（'选择'）。排序（{遏制：'parent}）；
采集：VaR遏制=美元（'选择'）。排序（'option'，'containment）；
设置：$（'选择'）。排序（'option'，'containment '，'parent）；

光标：字符串：汽车
如果在排序操作开始时定义样式。
初始：$（'选择'）。排序（{光标：'crosshair}）；
采集：var = $（光标，选择'）。排序（'option'，'cursor）；
设置：$（'选择'）。排序（'option'，'cursor '，'crosshair）；

CursorAt：对象：假
当你开始移动时，鼠标位于一个特定的位置（两个方向）。可选值：左，右，{，顶部，底部。
初始：$（'选择'）。排序（{ cursorat：' ' }）；
采集：VaR cursorat = $（'选择'）。排序（'option'，'cursorat）；
设置：$（'选择'）。排序（'option'，'cursorat '，' '）；

Delay：整数：0
排序操作以毫秒为单位激活，设置延迟的时间。此参数防止单击。
初始：$（'选择'）。排序（{延迟：500 }）；
采集：变量延迟= $（'选择'）。排序（'option'，'delay）；
设置：$（'选择'）。排序（'option'，'delay '，500）；

距离：整数：1
在决定至少要在元素上拖动多少像素之后，排序操作将被正式触发。
初始：$（'选择'）。排序（{距离：30 }）；
采集：VAR距离= $（'选择'）。排序（'option'，'distance）；
设置：$（'选择'）。排序（'option'，'distance '，30）；

DropOnEmpty：布尔：真
是否允许它拖放到一个空的合适对象。
初始：$（'选择'）。排序（{ droponempty：假}）；
采集：VaR droponempty = $（'选择'）。排序（'option'，'droponempty）；
设置：$（'选择'）。排序（'option'，'droponempty，假）；

forcehelpersize：布尔：假
如果为真，则强制助手有一个大小。
初始：$（'选择'）。排序（{ forcehelpersize：true}）；
采集：VaR forcehelpersize = $（'选择'）。排序（'option'，'forcehelpersize）；
设置：$（'选择'）。排序（'option'，'forcehelpersize '，真的）；

forceplaceholdersize：布尔：假
如果为true，则强制占位符具有大小。
初始：$（'选择'）。排序（{ forceplaceholdersize：true}）；
采集：VaR forceplaceholdersize = $（'选择'）。排序（'option'，'forceplaceholdersize）；
设置：$（'选择'）。排序（'option'，'forceplaceholdersize '，真的）；

网格：数组：false
排序对象的项元素被视为一个格子处理，每个运动都被一个格大小移动，数组值：{，y，}。
初始：$（'选择'）。排序（{网格：{ 50, 20 } }）；
采集：var = $（网格。选择器）。排序（'option'，'grid）；
设置：$（'选择'）。排序（'option'，'grid，{ 50, 20 }）；

句柄：选择器，元素：false
限制排序的操作只能从项元素中的一个元素开始。
初始：$（'选择'）。排序（{处理：'h2}）；
采集：VAR处理=美元（'选择'）。排序（'option'，'handle）；
设置：$（'选择'）。排序（'option'，'handle '，'h2）；

帮手：字符串，函数：'original
设置是否显示拖放元件，辅助元件。可选值：'original '，'clone
初始：$（'选择'）。排序（{帮手：'clone}）；
采集：无功辅助= $（'选择'）。排序（'option'，'helper）；
设置：$（'选择'）。排序（'option'，'helper '，'clone）；

项目选择器：*
指定可以在排序对象中拖动和排序哪些元素。
初始：$（'选择'）。排序（{项目：李}）；
采集：var =美元项目（'选择'）。排序（'option'，'items）；
设置：$（'选择'）。排序（'option'，'items '李'）；

不透明度：浮动：假
定义辅助元素（助手）在排序时显示的透明度。
初始：$（'选择'）。排序（{不透明度：0.6 }）；
采集：VAR不透明=美元（'选择'）。排序（'option'，'opacity）；
设置：$（'选择'）。排序（'option'，'opacity '，0.6）；

PlaceholderType：stringdefault：假
在排序操作发生时设置空白占位符的CSS样式。
初始：$（'选择'）。排序（{占位符：'ui-state-highlight}）；
采集：var = $（占位符。选择器）。排序（'option'，'placeholder）；
设置：$（'选择'）。排序（'option'，'placeholder '，'ui-state-highlight）；

返回：布尔值：false
如果设置为true，拖放元素返回到新位置时会产生动画效果。
初始：$（'选择'）。排序（{回复：真}）；
采集：VAR回复=美元（'选择'）。排序（'option'，'revert）；
设置：$（'选择'）。排序（'option'，'revert '，真的）；

滚动：布尔值：真
如果它被设置为true，该元素是自动滚动时，拖到页面的边缘。
初始：$（'选择'）。排序（{滚动：假}）；
采集：滚动= $（'选择'）。排序（'option'，'scroll）；
设置：$（'选择'）。排序（'option'，'scroll，假）；

scrollsensitivity：整数：20
当元素移动到多个像素的边缘时，页面开始滚动。
初始：$（'选择'）。排序（{ 40 } scrollsensitivity：）；
采集：VaR scrollsensitivity = $（'选择'）。排序（'option'，'scrollsensitivity）；
设置：$（'选择'）。排序（'option'，'scrollsensitivity '，40）；

scrollspeed：整数：20
设置页面滚动速度。
初始：$（'选择'）。排序（{ 40 } scrollspeed：）；
采集：VaR scrollspeed = $（'选择'）。排序（'option'，'scrollspeed）；
设置：$（'选择'）。排序（'option'，'scrollspeed '，40）；

宽容：字符串：'intersect
元素重新排序，当拖动元件设置在其他元素。可选值：'intersect '，'pointer
相交：至少50%
指针：鼠标指针重叠元素
初始：$（'选择'）。排序（{宽容：'pointer}）；
采集：公差= $（var '选择'）。排序（'option'，'tolerance）；
设置：$（'选择'）。排序（'option'，'tolerance '，'pointer）；

ZIndex：整数：1000
该元素的z-index值设置在排序操作的时间。
初始：$（'选择'）。排序（{在}：5）；
采集：VAR zIndex =美元（'选择'）。排序（'option'，'zindex）；
设置：$（'选择'）。排序（'option'，'zindex '，5）；
事件

起点
该事件在排序操作开始时触发。
定义：$（'选择'）。排序（{开始：功能（事件，UI）{…} }）；
结合：$（'选择'），Bind（'sortstart功能（事件，UI）{…}）；

排序
当元素被排序时触发事件。
定义：$（'选择'）。排序（{排序：功能（事件，UI）{…} }）；
结合：$（'选择'），Bind（有一点的，功能（事件，UI）{…}）；

改变
当元素被排序和坐标发生变化时触发事件。
Definition: $('.selector').Sortable ({change: function (event, UI) {...}});
结合：$（'选择'），Bind（'sortchange功能（事件，UI）{…}）；

beforestop
该事件由排序操作的结束触发。此时占位符元素和辅助元素仍然有效。
定义：$（'选择'）。排序（{ beforestop：功能（事件，UI）{…} }）；
结合：$（'选择'），Bind（'sortbeforestop功能（事件，UI）{…}）；

停止
当排序操作完成时触发该事件。
定义：$（'选择'）。排序（{停止功能（事件，UI）{…} }）；
结合：$（'选择'），Bind（'sortstop功能（事件，UI）{…}）；

更新
此事件在排序操作结束和元素坐标已更改时触发。
定义：$（'选择'）。排序（{更新：功能（事件，UI）{…} }）；
结合：$（'选择'），Bind（'sortupdate功能（事件，UI）{…}）；

接收
事件被触发时，连接排序对象接收另一个对象的元素排序。
定义：$（'选择'）。排序（{接收：功能（事件，UI）{…} }）；
结合：$（'选择'），Bind（'sortreceive功能（事件，UI）{…}）；

在
事件被触发时，元件拖移到另一可选择的对象。
定义：$（'选择'）。排序（{：功能（事件，UI）{…} }）；
结合：$（'选择'），Bind（'sortover功能（事件，UI）{…}）；

出
事件被触发时，元件拖放的合适对象移动，进入另一个合适的对象。
定义：$（'选择'）。排序（{：功能（事件，UI）{…} }）；
结合：$（'选择'），Bind（'sortout功能（事件，UI）{…}）；

激活
所有允许的可触发此事件时，一个连接开始进行排序，排序对象的动作。
定义：$（'选择'）。排序（{激活：功能（事件，UI）{…} }）；
结合：$（'选择'），Bind（'sortactivate功能（事件，UI）{…}）；

停用
所有允许的可触发此事件时，一个连接对象的排序排序结束动作。
定义：$（'选择'）。排序（{关闭：功能（事件，UI）{…} }）；
结合：$（'选择'），Bind（'sortdeactivate功能（事件，UI）{…}）；
方法
毁灭
从元素中删除拖放功能。
使用方法：排序（'destroy）。

禁用
元素的拖放功能被禁用。
使用方法：排序（'disable）。

使
启用元素的拖放功能。
使用方法：排序（'enable）。

选项
获取或设置元素的参数。
用法：。排序（'option'，optionname，{值}）

序列化
获取或设置序列化后每个项元素的id属性。
用法：。排序（'serialize，{选项}）

toArray
获取序列化后每个项元素的id属性的数组。
使用方法：排序（'toarray）。

刷新
手动刷新当前排序对象的元素排序。
使用方法：排序（刷新）。

refreshpositions
手工翻新当前排序对象的项目元素的坐标，这种方法可能会降低性能。
使用方法：排序（'refreshpositions）。

取消
取消在当前分类对象的项目元素的排序变化。
使用方法：排序（'cancel）。
排序后，有两种保存方法，一种是cookie，二种是数据库配置文件。

下面是数据库代码的原始部分：
复制代码代码如下所示：
$（函数（）{（））
var；
var = $（排行榜，排行榜）；
无功listleft = $（div { ID = 'column_left}）；
无功listcenter = $（div { ID = 'column_center}）；
无功listright = $（div { ID = 'column_right}）；
$（列）。排序（{
不透明：0.5 拖动透明度
还原：真正的缓冲区效应
光标：'move '，当鼠标拖动/风格
与：栏目。
对更新的结果，二是浪费资源，把古变成停止。
但是停止也将执行 /当不改变元素的位置时，
更新 / / JS会有其他的问题，^ _ ^
停止：函数（）{
无功new_order_left = {}； / /左栏的布局
无功new_order_center = {}； / /列布局
无功new_order_right = {}； / /右栏的布局
listleft.children（。portlet）。每个（函数（）{）
new_order_left.push（这个名称。）；
}）；
listcenter.children（。portlet）。每个（函数（）{）
new_order_center.push（这个名称。）；
}）；
listright.children（。portlet）。每个（函数（）{）
new_order_right.push（这个名称。）；
}）；
无功newleftid = new_order_left.join（'，'）；
无功newcenterid = new_order_center.join（'，'）；
无功newrightid = new_order_right.join（'，'）；
$ ajax（{
类型：邮政
网址：jsonurl / /服务器处理程序
数据：{ leftid：newleftid，centerid：newcenterid，rightid：newrightid }， / /身份：新的排列对应的ID，原来的顺序为：
beforesend：（功能）{ / /
/ / show.html（更新）；
}，
成功：函数（MSG）{
警报（MSG）；
show.html（）；
}
}）；
}
}）；