jQuery UI Draggable

by

To make a DOM element draggable, the jQuery UI draggable() method is used. Thus the element can be moved by clicking on it with the mouse. It can also be dragged anywhere within the viewport.

Syntax:

The draggable () method can be used in either of the two forms:

  • $(selector, context).draggable (options) Method
  • $(selector, context).draggable (“action”, params) Method

First Method:

To specify that an HTML element can be moved in an HTML page, the draggable (options) method where the behavior of the elements involved is specified by the options parameter.

Syntax:

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

To use multiple options at a time using a JavaScript object, commas can be used to separate them.

Syntax:

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

The options that can be used with this method are listed below:

Option Uses
addclasses To prevent the UI-draggable class from being added in the list of selected DOM elements when its value is set to false which is true by default.
appendto To indicate the element in which the draggable helper should be appended to while dragging. The default value is “parent”.
axis To constrain dragging to either the horizontal (x) or vertical (y) axis. Possible values:”x”, “y”.
cancel To restrict dragging from starting on specified elements. The “input,textarea, button,select,option” is its default value.
connecttosortable To define a list whose elements are interchangeable. The element is a part of the list at the end of placement. The default value is “false”.
containment To constrain dragging to within the bounds of the specified element or region. The default value is “false”.
cursor To define the CSS property of the cursor when the element moves, thus representing the shape of the mouse pointer. The default value is “auto”.
cursorat To set the offset of the dragging helper relative to the mouse cursor. Hash can be given as Coordinates using a combination of one or two keys: { top, left, right, bottom }. The default value is “false”.
delay To indicate the delay in milliseconds. After that time the first movement of the mouse is taken into account and the displacement may begin. The default value is “0”.
disabled To disable the ability to move items when set to true. Until this function is enabled (using the draggable (“enable”) instruction), the items cannot be moved. The default value is “false”.
distance To specify the number of pixels that the mouse must be moved before the displacement is taken into account. The default value is “1”.
grid To snap the dragging helper to a grid, every x and y pixels. Here, the array must be of the form [ x, y ]. The default value is “false”.
handle To restrict dragging from starting unless the mousedown occurs on the specified element(s). The default value is “false”.
helper To allow for a helper element to be used for dragging display. The default value is “original”.
iframefix To restrict the iframes from capturing the mousemove events during a drag. The default value is “false”.
opacity To specify the opacity of the element moved when moving. The default value is “false”.
refreshpositions To calculate all droppable positions on every mouse move when set to true. The default value is “false”.
revert To determine whether the element is moved back to its original position at the end of the move. The default value is “false”.
revertduration To determine the duration of displacement (in milliseconds) after which the element returns to its original position (see options.revert). The default value is “500”.
scope To group sets of draggable and droppable items, in addition to droppable’s accept option. The default value is “default”.
scroll To scroll the display if the item is moved outside the viewable area of the window, when set to true. The default value is “true”.
scrollsenstivity To determine how many pixels the mouse must exit the window to cause scrolling of the display. The default value is “20”.
scrollspeed To define the scrolling speed of the display once scrolling begins. The default value is “20”.
snap To adjust the display of the item being moved on other elements (which are flown). The default value is “false”.
snapmode To define the way the adjustment should be made between the moved element and those indicated in options.snap. The default value is “both”.
snaptolerance To define the maximum number of pixels in the difference in position necessary to establish the adjustment. The default value is “20”.
stack To control the z-index of the set of elements that match the selector, always brings the currently dragged item to the front. In things like window managers, it is very useful. The default value is “false”.
zindex To specify the z-index for the helper while being dragged. The default value is “false”.

Example 1:

  
  
    
    
    
    
    
  
  
     
  
      
Drag Me!!

Output:

Explanation:

In the above example, we are displaying draggable functionality. Here, no parameters are passed to the draggable() method.

Example 2: Using disable, distance and delay:

  
     
        
        
        
     
     
      
  
         Not Movable!!
  
      
  
      
  
           
            Drag me for 30px.
           
         
  
      
  
      
  
           
            Drag after 300ms.

Output 1:

Output 2:

Explanation:

In the above example, we are displaying the usage of the disabled, delay and distance. There are important options in the drag function of jQuery UI.

Example 3: Moving content by duplicating:

  
  
     
     
     
  
  
   
  
      Duplication is possible.

Output:

Explanation:

In the above example, we are using the using option helper with a value clone to move an element which is a clone of the selected element.

Example 4: Getting the current option value:

  
  
     
     
     
  
  
   
  
      Click to see the cursor type!!

Output 1:

Output 2:

Explanation:

In the above example, we are setting the value of the Cursor and the CursorAt option at the time of execution to get the value of any option at any time during the script execution.

Second Method:

To act like prevent displacement, the draggable (action, params) method is used. A string is used to specify the action parameter. Along with that, multiple params can also be passed based on the specified action.

Syntax:

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

The actions that can be used with this method are listed below:

Action Uses
destroy() To eliminate the drag functionality completely, so that the elements are no longer movable. The element will thus be returned back to its pre-init state.
disable() To disable the drag functionality, so that the elements cannot be moved until the next call to the draggable(“enable”) method.
enable() To reactivate the drag management so that the elements can be moved again.
option(optionname) To retrieve the value currently associated with the specified optionname. The name of the option to get is specified by the parameter optionname which is of type string.
option() To retrieve an object containing key/value pairs representing the current draggable options hash.
option(optionname, value) To set the value of the draggable option associated with the specified optionname. The name of the option to set is specified by the parameter optionname and the value parameter specifies the value to set for the option.
option(options) To set one or more options for the draggable. The map of option-value pairs to set is specified by the options parameter.
widget() To retrieve a jQuery object containing the draggable element.

Example 5:

  
     
        
        
        
     
     
      
  
         Dragging Disabled. Not Draggable!
  
      
  
      
  
         Dragging Enabled. Draggable!

Output 1:

Output 2:

Explanation:

In the above example, we are displaying the use and the behavior of the “disable” and “enable” action.