Easyui Basic Knowledge draggable (drag)

Before learning Easyui based on the parser, loader. For them, the introductory stage, we only need in a simple understanding. The first stage, should not be too deep after. Next, the document ordered according to Easyui is being researched to arrange the official website draggable insert.

Draggable what?

Draggable is a plug-in used in Easyui to implement drag-and-drop functionality. Use it. We can implement the drag effect of the control.

draggble overrides the default value of $.fn.draggable. defaults.

Draggable

Here is a look at the official website for draggable description of it.

Property

Its properties are as seen in the following table:

Name	Type	Descriptive narrative	Default value
Proxy	String,function	A proxy element that will be used during the drag process, when set to ' clone ', a clone element as the surrogate Used by the management object. Assuming that a function is defined, the function must return a jquery object, and the following shows how Create a simple proxy object. $ (' Dragitem '). Draggable ({ Proxy:function (source) { var p = $ (' <div style= "border:1px solid= #ccc; width:80px" ></div> "); p.html (source). HTML ()). AppendTo (' body '); return p; } });	Null
Revert	Boolean	If set to True, the element will return to the start position when the drag is finished	False
Cursor	String	When dragging, a CSS cursor (mouse style), here need to explain that there are a lot of Easyui mouse-like : Wait, help, hand type and so on. The value of its Cursor property corresponds to the number of the. I'll give you some optional values for the cursor in the back.	Move
DeltaX	Number	drag element position x corresponding current cursor	Null
DeltaY	Number	drag element position y corresponding current cursor	Null
Handle	Selector	Selectors that can be dragged elements	Null
Disabled	Boolean	True Stop dragging	False
Edge	Number	Drag the width, distance from the edge how much can be dragged ()	0
Axis	String	Define a drag element to drag the axis, can be ' V ' or ' h ', when set to NULL, can be dragged horizontally or vertically freely	Null

The table above has a very interesting property "cursor", which is expressed as the style of the mouse when dragging an element, but what is its value range? In fact, the list is already defined, detailed cursor optional values can be used for example the following link:/http Www.w3school.com.cn/tiy/t.asp?f=csse_cursor

A simple sample, code such as the following:

<! DOCTYPE html>

The above code needs to explain: here because the focus is no longer on the page, the hand cursor is not visible. In fact the cursor is on the "What do you Drag me to do" above.
This also indirectly illustrates the effect of the Proxy property as function.
As for other mouse CSS. Readers can try it on their own.
Event
Draggable events are better understood, such as the following:

 
 
 
  
  
 
   
 
    
Name
 
    
Number of references
 
    
Descriptive narrative information
 
   
 
   
 
    
Onbeforedrag
 
    
E
 
    
Drag before trigger, return False to cancel drag action
 
   
 
   
 
    
Onstartdrag
 
    
E
 
    
Triggered when the target object starts dragging
 
   
 
   
 
    
Ondrag
 
    
E
 
    
Trigger during drag
 
   
 
   
 
    
Onstopdrag
 
    
E
 
    
Trigger when drag is finished
 
   
 
  
 
 
 
Method

 
 
 
  
  
 
   
 
    
Name
 
    
Number of references
 
    
Descriptive narrative information
 
   
 
   
 
    
Options
 
    
None
 
    
Return to Options Properties
 
   
 
   
 
    
Proxy
 
    
None
 
    
If the Proxy property is already set, return the agent object
 
   
 
   
 
    
Enable
 
    
None
 
    
Start drag action
 
   
 
   
 
    
Disable
 
    
None
 
    
Disable drag Actions
 
   
 
  
 
 
 
How to use
Two ways to use:

 
 

  
  
 
   
Created through HTML tags, such as the following:
 
  
 
 
<div id= "dd" class= "easyui-draggable" data-options= "handle: ' #title '" style= "width:100px;height:100px;" >        <div id= "title" style= "background: #ccc; width:100px;height:100px;" > Content inside the container </div> </div>

2. Create by JS script:
<div id= "dd" style= "width:100px;height:100px;" >    <div id= "title" style= "background: #ccc;" >title</div></div><script>    $ (' #dd '). draggable ({        handle: ' #title '    }); </ Script>


Demo 
For draggable. The official website provides some sample addresses such as the following:
Plugin=draggable&theme=default&dir=ltr&pitem= ">http://www.jeasyui.com/demo/main/index.php? plugin=draggable&theme=default&dir=ltr&pitem=
For beginners, the demo sample above is sufficient.
over!
 
Copyright notice: This article Bo Master original articles, blogs, without consent may not be reproduced.
 
Easyui Basic Knowledge draggable (drag)