JQuery ui-draggable Chinese API

Very easy to use, just introduce the necessary documents

<script src= "Script/jquery-1.7.2.js" ></script>
<script src= "Script/jquery-ui.min.js" ></script>
<script src= "Script/jquery.ui.touch-punch.min.js" ></script>

Add Tags <script>$ (' #widget'). Draggable () </script> can be dragged and dragged

Overview

Enables drag functionality on any DOM element. Move the object anywhere within the window by clicking the mouse and dragging it.

Official Example Address: http://jqueryui.com/demos/draggable/

All event callback functions have two parameters: event and UI, browser-owned event object, and encapsulated UI object

Ui.helper-jquery object that represents the dragged element

Ui.position-Represents the coordinate value object of the mouse relative to the current object {Top,left}

Ui.offset-Represents the coordinate value of the mouse relative to the current page, object {Top,left}

• parameters

(Parameter name: Parameter type: Default value)

addclasses : boolean:true

If set to False, the load of the ui-draggable style is blocked at load time.

This will greatly optimize performance when there are many objects to load the draggable () plugin.

Initial: $ ('. Selector '). Draggable ({addclasses:false});

Get: var addclasses = $ ('. Selector '). draggable (' option ', ' addclasses ');

Set: $ ('. Selector '). draggable (' option ', ' addclasses ', false);

appendTo : element,selector: ' Parent '

The element passed to or selected by the AppendTo option would be used as the draggable helper ' s container during dragging.

By default, the helper was appended to the same container as the draggable.

Initial: $ ('. Selector '). Draggable ({appendTo: ' body '});

Get: var appendTo = $ ('. Selector '). draggable (' option ', ' appendTo ');

Set: $ ('. Selector '). draggable (' option ', ' appendTo ', ' body ');

Axis : string:false

Constrained drag actions can only be performed on the x-axis or y-axis, with optional values: ' x ', ' Y '.

Initial: $ ('. Selector '). Draggable ({axis: ' x '});

Get: var axis = $ ('. Selector '). draggable (' option ', ' axis ');

Set: $ ('. Selector '). draggable (' option ', ' axis ', ' X ');

Cancel : Selector: ': Input,option '

Prevents the start of dragging on the specified object.

Initial: $ ('. Selector '). Draggable ({cancel: ' button '});

Get: var cancel = $ ('. Selector '). draggable (' option ', ' Cancel ');

Set: $ ('. Selector '). draggable (' option ', ' Cancel ', ' button ');

connecttosortable : Selector:false

Allows draggable to be dragged to the specified sortables, and if this option is used, the helper property must be set to clone to work correctly.

Initial: $ ('. Selector '). Draggable ({connecttosortable: ' ul#mylist '});

Get: var connecttosortable = $ ('. Selector '). draggable (' option ', ' connecttosortable ');

Set: $ ('. Selector '). draggable (' option ', ' connecttosortable ', ' ul#mylist ');

Containment : selector,element,string, Array:false

Force draggable to only allow movement within the range of specified elements or ranges, optional values: ' Parent ', ' Document ', ' window ', [x1, y1, x2, y2].

Initial: $ ('. Selector '). Draggable ({containment: ' parent '});

Get: var containment = $ ('. Selector '). draggable (' option ', ' containment ');

Set: $ ('. Selector '). draggable (' option ', ' containment ', ' parent ');

cursor : String: ' auto ' specifies the CSS style of the mouse when doing a drag-and-drop action.

Initial: $ ('. Selector '). Draggable ({cursor: ' crosshair '});

Get: var cursor = $ ('. Selector '). draggable (' option ', ' cursor ');

Set: $ ('. Selector '). draggable (' option ', ' cursor ', ' crosshair ');

Cursorat : Object:false

When you start the move, the mouse is positioned at a location (up to two directions). Optional values: {Top, left, right, bottom}.

Initial: $ ('. Selector '). Draggable ({cursorat: {left:5}});

Get: var Cursorat = $ ('. Selector '). draggable (' option ', ' Cursorat ');

Set: $ ('. Selector '). draggable (' option ', ' Cursorat ', {left:5});

Delay : integer:0

The drag action (in milliseconds) is not activated until the specified time is delayed after the mouse point. This option can be used to prevent accidental hits when you don't want to drag elements.

Initial: $ ('. Selector '). Draggable ({delay:500});

Get: var delay = $ ('. Selector '). draggable (' option ', ' delay ');

Set: $ ('. Selector '). draggable (' option ', ' delay ', 500);

distance : integer:1 When the mouse point is down, the drag action is activated only after the specified pixels have been moved.

Initial: $ ('. Selector '). Draggable ({distance:30});

Get: var distance = $ ('. Selector '). draggable (' option ', ' distance ');

Set: $ ('. Selector '). draggable (' option ', ' distance ', 30);

grid : Array:false When dragging elements, you can only drag them in a specified size square. Selectable values: [x, Y]

Initial: $ ('. Selector '). Draggable ({grid: [50, 20]});

Get: var Grid = $ ('. Selector '). draggable (' option ', ' grid ');

Set: $ ('. Selector '). draggable (' option ', ' grid ', [50, 20]);

handle : element, the Selector:false limit can only be dragged by the specified element within the dragged element.

Initial: $ ('. Selector '). Draggable ({handle: ' H2 '});

Get: var handle = $ ('. Selector '). draggable (' option ', ' handle ');

Set: $ ('. Selector '). draggable (' option ', ' Handle ', ' H2 ');

helper : String, Function: ' Original '

The way the element is displayed when dragged. (If it is a function, the value must be returned as a DOM element) optional value: ' Original ', ' Clone ', function

Initial: $ ('. Selector '). Draggable ({helper: ' clone '});

Get: var helper = $ ('. Selector '). draggable (' option ', ' helper ');

Set: $ ('. Selector '). draggable (' option ', ' helper ', ' clone ');

iframefix : Boolean, Selector:false

Prevents the MouseOver event from moving over IFRAMEs and capturing it (internal content) when the drag action is triggered, and if set to true, the mask overwrites the iframe of the page. If set to the corresponding selector, the shielding layer overwrites the matching iframe.

Initial: $ ('. Selector '). Draggable ({iframefix:true});

Get: var Iframefix = $ ('. Selector '). draggable (' option ', ' iframefix ');

Set: $ ('. Selector '). draggable (' option ', ' Iframefix ', true);

opacity : Float:false

Changes the transparency of the element when the element starts dragging.

Initial: $ ('. Selector '). Draggable ({opacity:0.35});

Get: var opacity = $ ('. Selector '). draggable (' option ', ' opacity ');

Set: $ ('. Selector '). draggable (' option ', ' opacity ', 0.35);

refreshpositions : Boolean:false

If set to true, all coordinates in the move process are recorded. (Note: This feature will affect performance)

Initial: $ ('. Selector '). Draggable ({refreshpositions:true});

Get: var refreshpositions = $ ('. Selector '). draggable (' option ', ' refreshpositions ');

Set: $ ('. Selector '). draggable (' option ', ' refreshpositions ', true);

revert : Boolean, String:false when the element is dragged over, the element returns to its original position.

Initial: $ ('. Selector '). Draggable ({revert:true});

Get: var revert = $ ('. Selector '). draggable (' option ', ' revert ');

Set: $ ('. Selector '). draggable (' option ', ' revert ', true);

revertduration : integer:500

When the element is dragged over, the element returns to its original position for the time. (Unit: milliseconds)

Initial: $ ('. Selector '). Draggable ({revertduration:1000});

Get: var revertduration = $ ('. Selector '). draggable (' option ', ' revertduration ');

Set: $ ('. Selector '). draggable (' option ', ' revertduration ', 1000);

scope : String: ' Default '

The set element only allows dragging to an element with the same scope value.

Initial: $ ('. Selector '). Draggable ({scope: ' tasks '});

Get: var scope = $ ('. Selector '). draggable (' option ', ' scope ');

Set: $ ('. Selector '). draggable (' option ', ' scope ', ' tasks ');

Scroll : boolean:true

If set to True, the parent container scrolls automatically when the element is dragged to the edge.

Initial: $ ('. Selector '). Draggable ({scroll:false});

Get: var scroll = $ ('. Selector '). draggable (' option ', ' scroll ');

Set: $ ('. Selector '). draggable (' option ', ' scroll ', false);

scrollsensitivity : integer:20

The pixels that the parent window scrolls once when the element is dragged to the edge.

Initial: $ ('. Selector '). Draggable ({scrollsensitivity:40});

Get: var scrollsensitivity = $ ('. Selector '). draggable (' option ', ' scrollsensitivity ');

Set: $ ('. Selector '). draggable (' option ', ' scrollsensitivity ', 40);

scrollspeed : integer:20

The speed at which the parent window scrolls when the element is dragged to the edge.

Initial: $ ('. Selector '). Draggable ({scrollspeed:40});

Get: var scrollspeed = $ ('. Selector '). draggable (' option ', ' scrollspeed ');

Set: $ ('. Selector '). draggable (' option ', ' scrollspeed ', 40);

snap : Boolean, Selector:false

When set to TRUE or element label, elements are automatically adsorbed when they are dragged to the edges of other elements.

Initial: $ ('. Selector '). Draggable ({snap: ' span '});

Get: var snap = $ ('. Selector '). draggable (' option ', ' snap ');

Set: $ ('. Selector '). draggable (' option ', ' snap ', ' span ');

snapMode : String: ' Both '

Determines the mode of drag-and-drop element adsorption. Optional values: ' Inner ', ' outer ', ' both '

Initial: $ ('. Selector '). Draggable ({snapMode: ' outer '});

Get: var SnapMode = $ ('. Selector '). draggable (' option ', ' SnapMode ');

Set: $ ('. Selector '). draggable (' option ', ' SnapMode ', ' outer ');

snaptolerance : integer:20

The action of adsorption occurs when the dragged element is moved to a distance of how many pixels of other elements.

Initial: $ ('. Selector '). Draggable ({snaptolerance:40});

Get: var snaptolerance = $ ('. Selector '). draggable (' option ', ' snaptolerance ');

Set: $ ('. Selector '). draggable (' option ', ' snaptolerance ', 40);

Stack : object:false

Controls the z-index of the defined group (key ' group ' in the hash, accepts JQuery selector) automatically, always brings To front the dragged item. Very useful in things like window managers. Optionally, a ' min ' key can is set, so the zIndex cannot go below that value.

Initial: $ ('. Selector '). Draggable ({stack: {group: ' Products ', min:50}});

Get: var stack = $ ('. Selector '). draggable (' option ', ' stack ');

Set: $ ('. Selector '). draggable (' option ', ' stack ', {group: ' Products ', min:50});

zIndex : Integer:false controls the Z-index value of the element when dragging the element.

Initial: $ ('. Selector '). Draggable ({zindex:2700});

Get: var ZIndex = $ ('. Selector '). draggable (' option ', ' zIndex ');

Set: $ ('. Selector '). draggable (' option ', ' ZIndex ', 2700);

• Events

Start

This event is triggered when the mouse starts dragging.

Initial: $ ('. Selector '). Draggable ({start:function (event, UI) {...}});

Bindings: $ ('. Selector '). Bind (' DragStart ', function (event, UI) {...});

Drag

This event is triggered when the mouse is dragged and moved.

Initial: $ ('. Selector '). Draggable ({drag:function (event, UI) {...}});

Bindings: $ ('. Selector '). Bind (' drag ', function (event, UI) {...});

Stop

This event is triggered when the mouse is released.

Initial: $ ('. Selector '). Draggable ({stop:function (event, UI) {...}});

Bindings: $ ('. Selector '). Bind (' DragStop ', function (event, UI) {...});

• methods

Destory

Removes the drag function from the element.

Usage:. draggable (' Destroy ')

Disable

Disables the drag-and-drop function of the element.

Usage:. draggable (' disable ')

Enable

Enables drag-and-drop functionality for elements.

Usage:. draggable (' Enable ')

option

Gets or sets the parameters of the element.

Usage:. draggable (' option ', Optionname, [value]

JQuery ui-draggable Chinese API