JQuery easyui (1) Draggable (drag) component, jqueryeasyui

JQuery easyui (1) Draggable (drag) component, jqueryeasyui

I am not used to this kind of disruptive learning, but I am not a teacher, so I decided to stick to the exercises and add something to my blog. Although I am still disgusted with getting familiar with a tool in a short time.

Easyui, as a UI plug-in that encapsulates JQusey, is actually quite useful, at least saving a lot of time like me.

 

Draggable can be loaded in two ways:

1. Load by class, as shown below:

1 <div id="box" class="easyui-draggable"></div>

1. load through JS, as shown below:

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

The above two points need to be noted that both 'easyui-draggable' and draggable are fixed. They all call functions already written by easyui to achieve jQuery effect.

 

Draggable attributes:

When the value of revert is true, the start position is returned when the drag is stopped. You can drag it everywhere.

revert : boolean,

 

Axis restricts the direction of the drag, horizontal 'H '? Vertical 'V '? This is more interesting to combine with the revert and sets the direction of the drag

Vertical is the same as refreshing messages on Weibo.

axis : String/'v'/'h',

 

Proxy cloning means that the object to be dragged remains unchanged when dragging, and then copy an object to be dragged over the mouse, of course, also

Other functions can be triggered.

proxy : null/String/function,

There are many other attributes that are not particularly interesting.

Cursor: move/String, // specify the CSS style of the pointer when dragging. deltaX: null/number, deltaY: null/number, // The dragged element corresponds to x at the current cursor position. y is the handle that gives the dragged element a distance from the cursor: null/selector // start to drag the handle! You can only drag it with a handle! Yes! Disabled: boolean // if it is set to true, you cannot drag the first bound element edge: number // you can calculate the width of the container to be dragged from top to bottom of the container, just like a rectangle with a rectangle in it, the elements can be dragged only when the mouse is placed in the rectangle.

Example:

$ ('# Box '). draggable ({revert: true, cursor: 'text', handle: '# pox', disabled: false, edge: 50, axis: 'V', proxy: 'clone ', deltaX: 10, deltaY: 10, proxy: function (source) {console. log ('haha! ');}});

 

Draggable event:

Triggered before the onBeforeDrag is dragged. If the return value is false, the drag is canceled.

OnBeforeDrag: function (e) {alert ('triggered before dragging '); return false ;}

Triggered when onStartDrag is dragged.

OnStartDrag: function (e) {alert ('trigger upon dragging ');}

 

Triggered during onDrag dragging. If you cannot drag an event, false is returned.

OnDrag: function (e) {alert ('triggered during dragging ');}

Triggered when onDrag stops dragging

OnStopDrag: function (e) {alert ('triggered when dragging stop ');}

Draggable method list

 

Options returned property object

console.log($('#box').draggable('options'));

　

Proxy: If the proxy property is set, the drag proxy element is returned.

console.log($('#box').draggable('proxy'));

　　

Enable can be dragged

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

 

Disable cannot be dragged

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

 

The above is almost all the properties, events, and methods of Easyui 1.2.5 Draggable. If there is anything wrong, please comment, discuss and enlighten me.

 

----------------------------------------------------------