📌  相关文章
📜  jQuery UI Draggable

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

jQuery UI可拖动

jQuery UI draggable()方法用于使任何DOM元素可拖动。将元素设置为可拖动后，可以通过单击鼠标将其移动并将其拖动到视口内的任何位置。

句法：

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

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

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

第一种方法

draggable(选项)方法指定可以在HTML页面中移动HTML元素。在这里，option参数指定了所涉及元素的行为。

句法：

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

您可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项，则应使用逗号分隔。例如：

$(selector, context).draggable({option1: value1, option2: value2..... });

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

Option Description
addclasses If this option is set to false, it will prevent the UI-draggable class from being added in the list of selected DOM elements. By default its value is true.
appendto It specifies the element in which the draggable helper should be appended to while dragging. By default its value is “parent”.
axis This option constrains dragging to either the horizontal (x) or vertical (y) axis. Its possible values are:”x”, “y”.
cancel This option is used to prevent dragging from starting on specified elements. By default its value is “input,textarea, button,select,option”.
connecttosortable This option is used to specify a list whose elements are interchangeable. At the end of placement, the element is part of the list. By default its value is “false”.
containment Constrains dragging to within the bounds of the specified element or region. By default its value is “false”.
cursor It is used to specify the CSS property of the cursor 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 the 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 It disables the ability to move items when set to true. Items cannot be moved until this function is enabled (using the draggable (“enable”) instruction). By default its value is “false”.
distance The number of pixels that the mouse must be moved before the displacement is taken into account. By default its value is “1”.
grid It snaps the dragging helper to a grid, every x and y pixels. The array must be of the form [ x, y ]. By default its value is “false”.
handle If specified, restricts dragging from starting unless the mousedown occurs on the specified element(s). By default its value is “false”.
helper It allows for a helper element to be used for dragging display. By default its value is “original”.
iframefix It prevents iframes from capturing the mousemove events during a drag. By default its value is “false”.
opacity Opacity of the element moved when moving. By default its value is “false”.
refreshpositions If set to true, all droppable positions are calculated on every mousemove. By default its value is “false”.
revert It indicates whether the element is moved back to its original position at the end of the move. By default its value is “false”.
revertduration It indicates the duration of displacement (in milliseconds) after which the element returns to its original position (see options.revert). By default its value is “500”.
scope It is used to group sets of draggable and droppable items, in addition to droppable’s accept option. By default its value is “default”.
scroll when set to true (the default), the display will scroll if the item is moved outside the viewable area of the window. by default its value is “true”.
scrollsenstivity It indicates how many pixels the mouse must exit the window to cause scrolling of the display. By default its value is “20”.
scrollspeed It indicates the scrolling speed of the display once scrolling begins. By default its value is “20”.
snap It adjusts the display of the item being moved on other elements (which are flown). By default its value is “false”.
snapmode It specifies how the adjustment should be made between the moved element and those indicated in options.snap. By default its value is “both”.
snaptolerance It specifies the maximum number of pixels in the difference in position necessary to establish the adjustment. By default its value is “20”.
stack It controls the z-index of the set of elements that match the selector, always brings the currently dragged item to the front. It is very useful in things like window managers. By default its value is “false”.
zindex z-index for the helper while being dragged. By default its value is “false”.

jQuery UI Draggable()方法示例1

让我们以一个示例来演示可拖动功能，该功能不会将任何参数传递给draggable()方法。



  
  
  
  
  


     

      
I am draggable!

jQuery UI Draggable()方法示例2

如何使用禁用，距离和延迟：

让我们以一个示例来演示jQuery UI的拖动函数中三个重要选项禁用，延迟和距离的用法。


   
      
      
      
   
   
      

         I am not movable.


      

      

         
            Dragging will start only after you drag me for 50px
         
         


      

      

         
            Wait for 200ms before starting to drag.

jQuery UI Draggable()方法示例3

通过复制移动内容：

让我们以一个示例来演示如何移动作为所选元素克隆的元素。这是通过将选项帮助程序与值克隆一起使用来完成的。

 

   
   
   


   

      You can duplicate me....

jQuery UI Draggable()方法示例4

获取当前选项值：

让我们以一个示例来说明如何在脚本执行过程中随时获取任何选项的值。 cursor和cursorAt选项的值在执行时设置。



   
   
   


   

      Click on me to see cursor type.

第二种方法

可拖动(动作，参数)方法用于执行类似防止位移的动作。在此，将动作指定为字符串，并且可以根据给定的动作提供一个或多个参数。

句法：

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

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

Action Description
destroy() It is used to remove drag functionality completely. The elements are no longer movable. This will return the element back to its pre-init state.
disable() It is used to disable drag functionality. Elements cannot be moved until the next call to the draggable(“enable”) method.
enable() It is used to reactivates drag management. The elements can be moved again.
option(optionname) It gets the value currently associated with the specified optionname. Here optionname is name of the option to get and is of type string.
option() It gets an object containing key/value pairs representing the current draggable options hash.
option(optionname, value) It sets the value of the draggable 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 draggable. Here options is a map of option-value pairs to set.
widget() It returns a jQuery object containing the draggable element.

jQuery UI Draggable()方法示例5

让我们举一个例子来看上表中动作的用法。以下示例演示了“禁用”和“启用”操作的用法。


   
      
      
      
   
   
      

         Dragging is disabled. You can't move me!


      

      

         Dragging is enabled. Move Me!