JqueryUI - Draggable-alljchome-开发者的教程家园

JqueryUI Tutorial

JqueryUI Interactions

JqueryUI Widgets

JqueryUI Effects

JqueryUI Utilities

JqueryUI Useful Resources

Selected Reading

JqueryUI - Draggable

jQueryUI provides draggable() method to make any DOM element draggable. Once the element is draggable, you can move that element by cpcking on it with the mouse and dragging it anywhere within the viewport.

Syntax

The draggable() method can be used in two forms −

Method

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

The draggable (options) method declares that an HTML element can be moved in the HTML page. The options parameter is an object that specifies the behavior of the elements involved.

Syntax

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

You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −

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

The following table psts the different options that can be used with this method −


$(".selector").draggable(
   { addClasses: false }
);
$(".selector").draggable(
   { appendTo: "body"}
);
$(".selector").draggable(
   { axis: "x" }
);
$(".selector").draggable(
   { cancel: ".title" }
);
$(".selector").draggable(
   { connectToSortable: "#my-sortable" }
);
$(".selector").draggable(
   { containment: "parent" }
);
$(".selector").draggable(
   { cursor: "crosshair" }
);
$(".selector").draggable(
   $( ".selector" ).draggable({ cursorAt: { left: 5 } });
);
$(".selector").draggable(
   { delay: 300 }
);
$(".selector").draggable(
   { disabled: true }
);
$(".selector").draggable(
   { distance: 10 }
);
$(".selector").draggable(
   { grid: [ 50, 20 ] }
);
$(".selector").draggable(
   { handle: "h2" }
);
$(".selector").draggable(
   { helper: "clone" }
);
$(".selector").draggable(
   { iframeFix: true }
);
$(".selector").draggable(
   {  opacity: 0.35 }
);
$(".selector").draggable(
   { refreshPositions: true }
);
$(".selector").draggable(
   { revert: true }
);
$(".selector").draggable(
   { revertDuration: 200 }
);
$(".selector").draggable(
   { scope: "tasks" }
);
$(".selector").draggable(
   { scroll: false }
);
$(".selector").draggable(
   { scrollSensitivity: 100 }
);
$(".selector").draggable(
   { scrollSpeed: 100 }
);
$(".selector").draggable(
   { snap: true }
);
$(".selector").draggable(
   { snapMode: "inner" }
);
$(".selector").draggable(
   { snapTolerance: 30 }
);
$(".selector").draggable(
   { stack: ".products"  }
);
$(".selector").draggable(
   { zIndex: 100 }
);

Sr.No.	Option & Description
1	addClasses If this option is set to false, it will prevent the ui-draggable class from being added in the pst of selected DOM elements. By default its value is true.
2	appendTo Specifies the element in which the draggable helper should be appended to while dragging. By default its value is "parent".
3	axis This option constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: "x", "y".
4	cancel You can use this option to prevent dragging from starting on specified elements. By default its value is "input,textarea, button,select,option".
5	connectToSortable You can use this option to specify a pst whose elements are interchangeable. At the end of placement, the element is part of the pst. By default its value is "false".
6	containment Constrains dragging to within the bounds of the specified element or region. By default its value is "false".
7	cursor Specifies the cursor CSS property when the element moves. It represents the shape of the mouse pointer. By default its value is "auto".
8	cursorAt 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".
9	delay Delay, in milpseconds, 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".
10	disabled When set to true, disables the abipty to move items. Items cannot be moved until this function is enabled (using the draggable ("enable") instruction). By default its value is "false".
11	distance Number of pixels that the mouse must be moved before the displacement is taken into account. By default its value is "1".
12	grid 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".
13	handle If specified, restricts dragging from starting unless the mousedown occurs on the specified element(s). By default its value is "false".
14	helper Allows for a helper element to be used for dragging display. By default its value is "original".
15	iframeFix Prevent iframes from capturing the mousemove events during a drag. By default its value is "false".
16	opacity Opacity of the element moved when moving. By default its value is "false".
17	refreshPositions If set to true, all droppable positions are calculated on every mousemove. By default its value is "false".
18	revert Indicates whether the element is moved back to its original position at the end of the move. By default its value is "false".
19	revertDuration Duration of displacement (in milpseconds) after which the element returns to its original position (see options.revert). By default its value is "500".
20	scope Used to group sets of draggable and droppable items, in addition to droppable s accept option. By default its value is "default".
21	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".
22	scrollSensitivity Indicates how many pixels the mouse must exit the window to cause scrolpng of the display. By default its value is "20".
23	scrollSpeed Indicates the scrolpng speed of the display once scrolpng begins. By default its value is "20".
24	snap Adjusts the display of the item being moved on other elements (which are flown). By default its value is "false".
25	snapMode Specifies how the adjustment should be made between the moved element and those indicated in options.snap. By default its value is "both".
26	snapTolerance Maximum number of pixels in the difference in position necessary to estabpsh the adjustment. By default its value is "20".
27	stack Controls the z-index of the set of elements that match the selector, always brings the currently dragged item to the front. Very useful in things pke window managers. By default its value is "false".
28	zIndex Z-index for the helper while being dragged. By default its value is "false".

The following section will show you a few working examples of drag functionapty.

Default functionapty

The following example demonstrates a simple example of draggable functionapty passing no parameters to the draggable() method.

<!DOCTYPE html>
<html>
   <head>
      <pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #draggable { width: 150px; height: 150px; padding: 0.5em; background:#eee;}
      </style>
      
      <script>
         $(function() {
            $( "#draggable" ).draggable();
         });
      </script>
   </head>
   
   <body>
      <span id = "draggable" class = "ui-widget-content">
         <p>Drag me !!!</p>
      </span>
   </body>
</html>

Let us save the above code in an HTML file dragexample.htm and open it in a standard browser that supports javascript. You must also see the following output. Now, you can play with the result −