Easyui draggable Component to implement drag effect _jquery

Easyui as a package of Jqusey UI plug-ins, in fact, it is good to use, at least save a lot of time like me slag.

Draggable can be loaded in two ways:

1, loaded by class, as follows:

<div id= "box" class= "Easyui-draggable" ></div>

Loaded through JS, as follows:

$ (' #box '). draggable ();

The above two points to note is whether the ' easyui-draggable ', or draggable are fixed, they are by calling Easyui already written function, to achieve the jquery effect.

Properties of Draggable:

When the revert is true, drag stops to return to the starting position and can be dragged around.

Revert:boolean,

Axis limits Drag direction, horizontal ' h '? Vertical ' V '? This and revert together more interesting, set the drag direction to

The vertical is the same as the micro-letter, microblogging refresh message.

axis:string/' V '/' h ',

Proxy clone, is drag the time to drag the object unchanged, and then on the mouse to copy a drag on the object, of course, also

Can be something else and can trigger a function.

Proxy:null/string/function,
Then there are a lot of other attributes that are not particularly interesting.

Cursor:move/string,//specifies that when dragging the CSS style of the pointer becomes Meimei
Deltax:null/number,
Deltay:null/number,//The dragged element corresponds to the current cursor position x,y is the distance between the dragged element and the cursor
Handle:null/selector//start dragging handle handle! You can only drag with the handle! That's right!
Disabled:boolean//Set to True is, you cannot drag the elements that are bound by the
Edge:number//You can drag the width of the container from top to bottom in the container, like a rectangle inside a rectangle, and then the inside that only the mouse is placed inside the rectangle when the element can be dragged

Example:

$ (' #box '). Draggable ({
  revert:true,
  cursor: ' text ',
  handle: ' #pox ',
  disabled:false,
  edge:50,< C6/>axis: ' V ',
  proxy: ' Clone ',
  deltax:10,
  deltay:10,
  proxy:function (source) {
    Console.log (' Oh clatter! ');
  }
});

Draggable Events:

Onbeforedrag to trigger before dragging, returns false to cancel drag

Onbeforedrag:function (e) {
  alert (' Trigger before dragging ');
  return false;
}

Trigger when Onstartdrag drag

Onstartdrag:function (e) {
  alert (' Triggers on drag ');
}

Ondrag drag to trigger, can't drag things return false

Ondrag:function (e) {
  alert (' Drag procedure trigger ');
}

Trigger when Ondrag stops dragging

Onstopdrag:function (e) {
  alert (triggers on drag stop);
}

Draggable Method List

Options Return Property Object

Console.log (' #box '). draggable (' options ');

Proxy returns the drag agent element if the Proxy property is set

Console.log (' #box '). Draggable (' proxy ');

Enable can be dragged

$ (' #box '). Draggable (' Enable ');

Disable is prohibited from being dragged

$ (' #box '). Draggable (' disable ');

Let's take a look at a simple example

<pre class= "Brush:java;" >html> <meta charset= "UTF-8" > <title>basic draggable-jquery easyui demo</title> < Link rel= "stylesheet" type= "Text/css" href= "Jquery-easyui-1.3.6/themes/metro/easyui.css" > <link rel= " Stylesheet "type=" Text/css "href=" Jquery-easyui-1.3.6/themes/icon.css "> <link rel=" stylesheet "type=" text/css "href=" Jquery-easyui-1.3.6/demo/demo.css "> <script type=" text/javascript "src=" jquery-easyui-1.3.6/ Jquery.min.js "></script> <script type=" Text/javascript "src=" jquery-easyui-1.3.6/jquery.easyui.min.js "></script>  

The above is almost all the properties, events, methods, and examples of Easyui 1.2.5  draggable, and if anything is wrong, please comment, discuss and enlighten us.