EasyUI jQuery Draggable widget

Last Updated : 12 Dec, 2021

In this article, we will learn how to design a draggable widget using jQuery EasyUI. EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

The widget creates a draggable element from markup or selector.

Download EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

Syntax:

var a = $(".selector").draggable({
    
});

Properties:

proxy: It is of type string or function. A proxy element to be used to set the 'clone'. A clone element is used as a proxy. If a function is specified, it must return a jQuery object.
revert: It is of type boolean. The element will return to its starting position when the dragging stops.
cursor: It is of type string. The CSS cursor to be displayed when dragging.
delta X: It is of type number. The dragged element position x corresponding to the current cursor.
delta Y: It is of type number. The dragged element position y corresponding to the current cursor.
handle: It's type is a selector. The handle that starts the draggable.
disabled: It's type is boolean. If it's set to true, the draggable feature will be disabled.
edge: It's type is number. The width of the drag which can be used to start the draggable property.
axis: It's type is a string. It sets the axis on which the dragged elements move on.
delay: It's type is a delay. It defines the delay in time in milliseconds.

Events:

onBeforeDrag: The parameter is an event. It fires before dragging.
onStartDrag: The parameter is an event. It fires when the object starts dragging.
onDrag: The parameter is an event. It fires during dragging.
onEndDrag: The parameter is an event. It fires when the dragging end.
onStopDrag: The parameter is an event. It fires when the dragging stops.

Methods:

options: It returns the options property.
Proxy: If the proxy property is set, it returns the drag proxy.
Enable: It enables the drag action.
disable: It disables the drag action.

Note: In the following examples only a few examples are shown, the developer can try out other properties, events, and methods listed above as per the application's requirement.

CDN Links: First, add jQuery Easy UI scripts needed for your project.

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="jquery.easyui.min.js"></script>

<script type="text/javascript" src="jquery.easyui.mobile.js"></script>

Example: The following example demonstrates jQuery EasyUI Draggable widget.

HTML

<!DOCTYPE html> 
<html> 
 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="initial-scale=1.0, maximum-scale=1.0, 
                   user-scalable=no"> 
             
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
          href="themes/metro/easyui.css"> 
 
    <link rel="stylesheet" type="text/css"
          href="themes/mobile.css"> 
 
    <link rel="stylesheet" type="text/css"
          href="themes/icon.css"> 
 
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js"> 
    </script> 
 
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript"
            src="jquery.easyui.min.js"> 
    </script> 
     
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
            src="jquery.easyui.mobile.js"> 
    </script> 
 
    <script type="text/javascript">
        $(document).ready(function (){
            $('#gfg1').draggable({
                handle:'#drag1',
            });
        });

        $(document).ready(function (){
            $('#gfg').draggable({
                handle:'#drag',
                cursor: 'pointer',
                revert: 'true'
            });
        });
    </script>
</head> 
 
<body>
    
    <h1>GeeksforGeeks</h1>
    <h3>EasyUI Draggable Widget</h3>
    <div id="gfg">
        <div id="drag" 
             style="background:rgb(199, 199, 199); 
                    width: 180px;">
           
<p>Revert Draggable Element
<p>
        </div>
    </div>
    <div id="gfg1">
        <div id="drag1" 
             style="background:rgb(199, 199, 199); 
                    width: 180px;">
           
<p>Draggable Element
<p>
        </div>
    </div>
    
</body> 
 
</html>