JQuery EasyUI -- Draggable component

Keywords: Attribute Javascript JQuery

Links to the original text: https://my.oschina.net/myfirtyou/blog/624315

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>
<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" />
<div id="box" style="width:400px;height:200px;background:orange;">

// JS Load Call

//JS Load call


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

        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">');
            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

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


The above method simply passes in the relevant parameters after the element binds draggable.


Reproduced in: https://my.oschina.net/myfirtyou/blog/624315

Posted by PallaviDalvi on Fri, 13 Sep 2019 04:06:56 -0700