jQuery UI Sortable - 芒果文档

📌 相关文章

📜 jQuery UI Sortable

📅 最后修改于: 2020-11-27 01:52:05 🧑 作者: Mango

jQueryUI可排序

jQueryUI sortable()方法用于通过使用鼠标对列表或网格形式的元素进行重新排序。此方法的排序能力基于作为第一个参数传递的操作字符串。

句法：

您可以两种形式使用sortable()方法：

1.    $(selector, context).sortable (options) Method

2.    $(selector, context).sortable ("action", params) Method

第一种方法

sortable(选项)方法指定HTML元素包含可互换的元素。在这里，options参数指定在重新排序过程中涉及的元素的行为。

句法：

$(selector, context).sortable (options);

以下是可与该方法一起使用的不同选项的列表：

Option	Description
appendto	This option specifies the element in which the new element created with options.helper will be inserted during the time of the move/drag. By default its value is parent.
axis	This option indicates an axis of movement (“x” is horizontal, “y” is vertical). By default its value is false.
cancel	This option is used to prevent sorting of elements by clicking on any of the selector elements. By default its value is “input,textarea,button,select,option”.
connectwith	This option is a selector that identifies another sortable element that can accept items from this sortable. This allows items from one list to be moved to other lists, a frequent and useful user interaction. If omitted, no other element is connected. This is a one-way relationship. By default its value is false.
containment	This option indicates an element within which the displacement takes place. The element will be represented by a selector (only the first item in the list will be considered), a DOM element, or the string “parent” (parent element) or “window” (html page).
cursor	It specifies the cursor CSS property when the element moves. It represents the shape of the mouse pointer. By default its value is “auto”.
cursorat	It sets the offset of the dragging helper relative to the mouse cursor. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }. By default its value is “false”.
delay	It specifies delay in milliseconds, after which the first movement of the mouse is taken into account. The displacement may begin after that time. By default its value is “0”.
disabled	This option if set to true, disables the sortable functionality. By default its value is false.
distance	It indicates the number of pixels that the mouse must be moved before the sorting starts. If specified, sorting will not start until after mouse is dragged beyond distance. By default its value is “1”.
droponempty	If you set this option to false, then items from this sortable can’t be dropped on an empty connect sortable. By default its value is true.
forcehelpersize	If you set this option to true, it forces the helper to have a size. By default its value is false.
forceplaceholdersize	This option when set to true, takes into account the size of the placeholder when an item is moved. This option is only useful if options.placeholder is initialized. By default its value is false.
grid	This option is an array [x, y] indicating the number of pixels that the sorting element moves horizontally and vertically during displacement of the mouse. By default its value is false.
handle	If specified, restricts sort from starting unless the mousedown occurs on the specified element(s). By default its value is false.
helper	It is allowed for a helper element to be used for dragging display. By default its value is original.
items	This option specifies which items inside the DOM element to be sorted. By default its value is > *.
opacity	This option is used to define the opacity of the helper while sorting. By default its value is false.
placeholder	This option is used to class name that gets applied to the otherwise white space. By default its value is false.
revert	This option decides whether the sortable items should revert to their new positions using a smooth animation. By default its value is false.
scroll	This option is used to enable scrolling. If you set this option to true the page scrolls when coming to an edge. By default its value is true.
scrollsenstivity	This option indicates how many pixels the mouse must exit the visible area to cause scrolling. By default its value is 20. This option is used only with options.scroll set to true.
scrollspeed	This option indicates the scrolling speed of the display once the scrolling begins. By default its value is 20.
tolerance	This option is a string that specifies which mode to use for testing whether the item being moved is hovering over another item. By default its value is “intersect”.
zIndex	This option represents z-Index for element/helper while being sorted. By default its value is 1000.

jQuery UI Sortable示例1

让我们以一个简单的示例来演示可排序的功能，不将任何参数传递给sortable()方法。



   jQuery UI Sortable - Example
   
   
   
   
   


 Courses Available at JavaTpoint
   
      Java/J2EE
      .NET
      SQL
      PHP
      Android
      C/C++
      jQuery

jQueryUI Sortable示例2

如何使用选项延迟和距离：

让我们以一个示例来演示jQuery UI排序中延迟和距离的用法。



   jQuery UI Sortable - Example
   
   
   
   
   


   Delay by 500ms
   
      Java
      SQL
      .NET
      Oracle
   
   Distance Delay by 50px
   
      Java
      SQL
      .NET
      Oracle

jQueryUI Sortable示例3

如何使用占位符：

让我们以一个示例来演示在jQuery UI的sort()函数中使用占位符。



   jQuery UI Sortable - Example
   
   
   
   
   


Courses available at JavaTpoint
   
      Java
      .NET
      Android
      PHP
      C/C++
      Spring
      Hibernate

jQueryUI Sortable示例4

如何使用选项connectWith和dropOnEmpty：

此示例指定如何在jQueryUI的sort函数中使用connectWith和dropOnEmpty选项。



   jQuery UI Sortable - Example
   
   
   
   
   


   Pool A
      India
      Australia
      Bangla Desh
      Kenya
   
   Pool B
      Pakistan
      Sri Lanka
      West Indies
      Canada
   
   PoolC
      South Africa
      England
      Zimbambe
      UAE

第二种方法

sortable(操作，参数)方法用于对可排序元素执行操作，例如防止位移。在这里，在第一个参数中将动作指定为字符串，并且可以选择基于给定的动作添加一个或多个参数。

句法：

$(selector, context).sortable ("action", [params]);

以下是此方法中使用的操作的列表：

Action	Description
cancel()	This action is used to cancel the current sort operation. This is most useful within handlers for the sort receive and sort stop events. This method does not accept any arguments.
destroy()	This action is used to remove the sortability functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.
disable()	This action is used to disable the sortability of any sortable elements in the wrapped set. It only disables the sortability of the elements not removed and it can be restored by calling the enable variant of this method. This method does not accept any arguments.
enable()	This action is used to re-enable the sortability on any sortable elements in the wrapped set whose sortability has been disabled. You should note that this method won?t add sortability to any non-sortable elements. This method does not accept any arguments.
option(optionName)	This action is used to get the value currently associated with the specified optionname. Here optionname is the name of the option to get.
option()	It is used to get an object containing key/value pairs representing the current sortable options hash. This method does not accept any arguments.
option(optionName, value)	This action is used to set the value of the sortable option associated with the specified optionname. Here optionname is the name of the option to set and value is the value to set for the option.
option(options)	It sets one or more options for the sortable. Here options is a map of option-value pairs to set.
refresh()	this action is used to refresh the list of items if necessary. This method does not accept any arguments. If you call this method then it will be added to the sortable to be recognized.
toArray(options)	This method is used to return an array of the id values of the sortable elements in sorted order. This method takes options as parameter, to customize the serialization or sorted order.
serialize(options)	This method returns a serialized query string (submittable via ajax) formed from the sortable.
refreshPositions()	This method is used mostly internally to refresh the cached information of the sortable. This method does not accept any arguments.
widget()	This method returns a jquery object containing the sortable element. This method does not accept any arguments.

jQueryUI Sortable示例5

让我们以一个示例来演示上述操作的用法。

以下示例显示了toArray(options)方法的用法：



   jQuery UI Sortable - Example
   
   
   
   
   


   
      Java
      SQL
      PHP
      .NET

带有jQueryUI可排序元素的事件管理

jQueryUI可排序方法便于事件方法针对特定事件被触发。以下是这些事件方法的列表。

event method	description
activate(event, ui)	this event is triggered on the sortable when a sort operation starts on connected sortable.
beforestop(event, ui)	this event is triggered when the sort operation is about to end, with the helper and placeholder element reference still valid.
change(event, ui)	this event is triggered when the sorted element changes position within the dom.
create (event, ui)	this event is triggered when the sortable is created.
deactivate (event, ui)	this event is triggered when a connected sort stops, propagated to the connected sortable.
out(event, ui)	this event is triggered when the sort item is moved away from a connected list.
over(event, ui)	this event is triggered when a sort item moves into a connected list.
recieve(event, ui)	this event is triggered when a connected list has received a sort item from another list.
remove(event, ui)	this event is triggered when the sort item is removed from a connected list and is dragged into another.
sort(event,ui)	this event is repeatedly triggered for mousemove events during a sort operation.
start(event,ui)	this event is triggered when a sort operation starts.
stop(event,ui)	this event is triggered when a sort operation has concluded.
update(event, ui)	this event is triggered when a sort operation stops and the position of the item has been changed.

jQueryUI Sortable示例6

让我们以一个示例来演示在放置功能期间事件接收，启动和停止的用法。



   jQuery UI Sortable - Example
   
   
   
   
   


   
       
         Pool A
         
            India
            Australia
            Bangladesh
            Sri Lanka
         
      
      
         Popularity 
         
            89%
            87%
            61%
            78%