Learning Points:
1. Loading mode
2. Attribute List
3. Event List
4. Method List
This section focuses on the use of Draggable (drag) components in EasyUI, which are independent of other components.
Loading mode
// class loading method. This way, it seems that the HTML code is not clean and will pollute the html. JS is recommended for loading
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /> </head> <body> <div id="box" style="width:400px;height:200px;background:orange;"> </div> </body> </html>
// JS Load Call
//JS Load call $('#box').draggable();
II. Attribute List
Draggable attribute
Attribute Name Value Description
Proxy, null/string, function. When using'clone', clone an alternate element to drag. If a function is specified, the replacement element is customized.
revert false/boolean Sets to true, then returns to the starting position when the drag stops
cursor. move/string. CSS pointer style when dragging
The dragged element corresponds to the current cursor position x
The dragged element corresponds to the current cursor position y
Handle null/selector Start dragging handle
Disad false/boolean Set to true, then stop dragging
Width of containers that can be dragged in edge 0/number
axis * null/string * Set drag to vertical'v'or horizontal'h'
JS code
$('#box').draggable({
revert : true,
cursor : 'text',
handle : '#pox',
disabled : true,
edge : 180,
axis : 'v',
proxy : 'clone',
deltaX : 50,
deltaY : 50,
proxy : function (source) {
var p = $('<div style="width:400px;height:200px;border:1px dashed #ccc">');
p.html($(source).html()).appendTo('body');
return p;
}
});Event List
Event Name * Reference * Explanation _____________
Triggered before dragging, returning false will cancel the drag
onStartDrag. e. Trigger at the start of the drag
onDrag e Triggered during dragging and returned false if it could not be dragged ___________.
On StopDrag e Triggered when the drag stopped
$('#box').draggable({
onBeforeDrag : function (e) {
alert('Trigger before dragging!');
return false;
},
onStartDrag : function (e) {
alert('Trigger when dragging!');
},
onDrag : function (e) {
alert('Trigger during dragging!');
},
onStopDrag : function (e) {
alert('Triggered when the drag stops!');
},
}); IV. List of Methods
Event Name Reference Description
options none Returns the attribute object
proxy none. Returns the drag agent element if the agent property is set
enable none allows dragging
Disabled. none. Prohibit dragging
$('#box').draggable('disable');
$('#box').draggable('enable');
console.log($('#box').draggable('options'));The above method simply passes in the relevant parameters after the element binds draggable.
Reproduced in: https://my.oschina.net/myfirtyou/blog/624315