jQuery UI draggable() Method/Widget

Date Published: 28/04/2020Published By: JaiSchool

Jquery UI provides a method - draggable() to make an Html element draggable. This method contains options, methods, and events to customize its features.

scroll property/option of Jquery UI draggable() method

The scroll option of the draggable() method (Jquery widget) makes the container of draggable element auto-scroll as when it is defined scroll:true and you drag the element on the right or bottom side. The scroll option has two values true and false.

Example:-

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI draggable() method - Jaischool</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    #parent{
      width:100%;
      height:500px;
      border:2px solid red;
      overflow:scroll;
    }
    #box{
      width:150px;
      height:150px;
      background-color:red;
      cursor:all-scroll;
    }
  </style>
</head>
<body>
  <h1 align="center">Welcome To Jaischool.com</h1>
  
  <div id="parent">
    <div id="box"></div>
  </div>

  <script>
    $(document).ready(function(){
      $("#box").draggable({
        scroll:true,
      });
    });
  </script>

</body>
</html>

scrollSensitivity of Jquery UI draggable() method

This works on touch screen devices. This works only when scroll:true option defined.

Example:-

<!DOCTYPE html>
<html>
<head>
  <title>scrollSensitivity property</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    #parent{
      width:100%;
      height:500px;
      border:2px solid red;
      overflow:scroll;
    }
    #box{
      width:150px;
      height:150px;
      background-color:red;
      cursor:all-scroll;
    }
  </style>
</head>
<body>
  <h1 align="center">Welcome To Jaischool.com</h1>
  
  <div id="parent">
    <div id="box"></div>
  </div>

  <script>
    $(document).ready(function(){
      $("#box").draggable({
        scroll:true,
        scrollSensitivity:100,
      });
    });
  </script>

</body>
</html>

scrollSpeed option of Jquery UI draggable() method

It defines the speed of scrolling when the draggable element will be dragged out of the parent element or when throws it by pressing from the thumb. This also works only when scroll:true option defined.

Example:-

<!DOCTYPE html>
<html>
<head>
  <title>scrollSpeed property</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    #parent{
      width:100%;
      height:500px;
      border:2px solid red;
      overflow:scroll;
    }
    #box{
      width:150px;
      height:150px;
      background-color:red;
      cursor:all-scroll;
    }
  </style>
</head>
<body>
  <h1 align="center">Welcome To Jaischool.com</h1>
  
  <div id="parent">
    <div id="box"></div>
  </div>

  <script>
    $(document).ready(function(){
      $("#box").draggable({
        scroll:true,
        scrollSensitivity:100,
        scrollSpeed:100,
      });
    });
  </script>

</body>
</html>

axis option of Jquery UI draggable() method

It contains two values "x" and "y". When it is defined axis:x then element is draggable horizontally. And for axis:y the element is only draggable in the y-axis.

Example:-

<!DOCTYPE html>
<html>
<head>
  <title>axis property of draggable()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    #parent{
      width:80%;
      height:500px;
      border:2px solid red;
    }
    #box{
      width:150px;
      height:150px;
      background-color:red;
      cursor:all-scroll;
    }
  </style>
</head>
<body>
  <h1 align="center">Welcome To Jaischool.com</h1>
  
  <div id="parent">
    <div id="box"></div>
  </div>

  <script>
    $(document).ready(function(){
      $("#box").draggable({
        axis:"y",
      });
    });
  </script>

</body>
</html>

containment option of Jquery UI draggable() method

The containment option contains id or class value of the of the container of draggable element. The element can't be dragged outside the element defined in the containment options.

Example:-

<!DOCTYPE html>
<html>
<head>
  <title>containment property</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    #parent{
      width:80%;
      height:500px;
      border:2px solid red;
    }
    #box{
      width:150px;
      height:150px;
      background-color:red;
      cursor:all-scroll;
    }
  </style>
</head>
<body>
  <h1 align="center">Welcome To Jaischool.com</h1>
  
  <div id="parent">
    <div id="box"></div>
  </div>

  <script>
    $(document).ready(function(){
      $("#box").draggable({
        containment:"parent"
      });
    });
  </script>

</body>
</html>

opacity option of Jquery UI draggable() method

Defines the opacity of the draggable element when it is dragging.

Example:-

<!DOCTYPE html>
<html>
<head>
  <title>opacity property of draggable</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    #parent{
      width:80%;
      height:500px;
      border:2px solid red;
    }
    #box{
      width:150px;
      height:150px;
      background-color:red;
      cursor:all-scroll;
    }
  </style>
</head>
<body>
  <h1 align="center">Welcome To Jaischool.com</h1>
  
  <div id="parent">
    <div id="box"></div>
  </div>

  <script>
    $(document).ready(function(){
      $("#box").draggable({
        containment:"#parent",
        opacity:0.5,
      });
    });
  </script>

</body>
</html>

cursor option of Jquery UI draggable method/widget-

<!DOCTYPE html>
<html>
<head>
  <title>move property of draggable()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    #parent{
      width:80%;
      height:500px;
      border:2px solid red;
    }
    #box{
      width:150px;
      height:150px;
      background-color:red;
    }
  </style>
</head>
<body>
  <h1 align="center">Welcome To Jaischool.com</h1>
  
  <div id="parent">
    <div id="box"></div>
  </div>

  <script>
    $(document).ready(function(){
      $("#box").draggable({
        containment:"#parent",
        opacity:0.5,
        cursor:"move",
      });
    });
  </script>

</body>
</html>

cursorAt option of Jquery UI draggable() method

Defines cursor position from draggable element. Use properties left, right, top, and bottom. They should be in curly braces.

Example:-

<!DOCTYPE html>
<html>
<head>
  <title>cursorAt property of draggable()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    #parent{
      width:80%;
      height:500px;
      border:2px solid red;
    }
    #box{
      width:150px;
      height:150px;
      background-color:red;
    }
  </style>
</head>
<body>
  <h1 align="center">Welcome To Jaischool.com</h1>
  
  <div id="parent">
    <div id="box"></div>
  </div>

  <script>
    $(document).ready(function(){
      $("#box").draggable({
        containment:"#parent",
        opacity:0.5,
        cursor:"move",
        cursorAt:{top:0,left:0},
      });
    });
  </script>

</body>
</html>

revert option of Jquery UI draggable() method

The draggable element will return to its previous position dynamically because of transitions applied by jquery UI library after drag-leave. This property have values true and false (default value).

Example~~

<!DOCTYPE html>
<html>
<head>
  <title>revert property of draggable()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    #parent{
      width:80%;
      height:500px;
      border:2px solid red;
    }
    #box{
      width:150px;
      height:150px;
      background-color:red;
    }
  </style>
</head>
<body>
  <h1 align="center">Welcome To Jaischool.com</h1>
  
  <div id="parent">
    <div id="box"></div>
  </div>

  <script>
    $(document).ready(function(){
      $("#box").draggable({
        containment:"#parent",
        opacity:0.5,
        cursor:"move",
        cursorAt:{top:0,left:0},
        revert:true,

      });
    });
  </script>

</body>
</html>

helper option of Jquery UI draggable method

The actual element remains same (at its position). You will see a copy (clone) of it dragging. Use helper:clone to create a duplicate copy. Instead of creating same copy by helper:clone you can create any shape you want to drag as clone.

Example:- When helper:clone

<!DOCTYPE html>
<html>
<head>
  <title>helper property of draggable</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    #parent{
      width:80%;
      height:500px;
      border:2px solid red;
    }
    .box{
      width:150px;
      height:150px;
      background-color:red;
    }
  </style>
</head>
<body>
  <h1 align="center">Welcome To Jaischool.com</h1>
  
  <div id="parent">
    <div class="box"></div>
  </div>

  <script>
    $(document).ready(function(){
      $(".box").draggable({
        containment:'#parent',
        opacity:'0.8',
        cursor:"move",
        cursorAt:{top:0,left:0},
        revert:true,
        helper:'clone',

      });
    });
  </script>

</body>
</html>

helper property will not work if you select the draggable element by its id value. So select by class.

Example:- Create custom clone

Create a custom duplicate element as you want. The return keyword provides the element to the helper property. See Syntax in example-

<!DOCTYPE html>
<html>
<head>
  <title>helper property of Jquery UI draggable()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    #parent{
      width:80%;
      height:500px;
      border:2px solid red;
    }
    .box{
      width:150px;
      height:150px;
      background-color:red;
    }
  </style>
</head>
<body>
  <h1 align="center">Welcome To Jaischool.com</h1>
  
  <div id="parent">
    <div class="box"></div>
  </div>

  <script>
    $(document).ready(function(){
      $(".box").draggable({
        containment:'#parent',
        opacity:'0.8',
        cursor:"move",
        cursorAt:{top:0,left:0},
        revert:true,
        helper:function(){
          return $("<h1>Jaischool</h1>");
        }

      });
    });
  </script>

</body>
</html>

revertDuration option of Jquery UI draggable() method

Time (in milliseconds) to go in its previous position after dragging leave.

Example:-

<!DOCTYPE html>
<html>
<head>
  <title>revertDuration property of draggable()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    #parent{
      width:80%;
      height:500px;
      border:2px solid red;
    }
    .box{
      width:150px;
      height:150px;
      background-color:red;
    }
  </style>
</head>
<body>
  <h1 align="center">Welcome To Jaischool.com</h1>
  
  <div id="parent">
    <div class="box"></div>
  </div>

  <script>
    $(document).ready(function(){
      $(".box").draggable({
        containment:'#parent',
        opacity:'0.8',
        cursor:"move",
        cursorAt:{top:0,left:0},
        revert:true,
        revertDuration:3000,
        helper:function(){
          return $("<h1 style='color:red;'>Jaischool.com</h1>");
        },

      });
    });
  </script>

</body>
</html>

snap option

We select the element by class in its value. The draggable element will be sticked to it when the distance between these is defined in snapTolerance (default value 20).

Example***

<!DOCTYPE html>
<html>
<head>
  <title>snap property of draggable()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    .box{
      width:100px;
      height:100px;
      background-color:green;
      float:left;
      margin-right:10px;
    }
    .box-1{
      width:100px;
      height:100px;
      background-color:red;
      float:left;
    }
    .stick{
      width:500px;
      height:400px;
      border:3px groove red;
      float:right;
    }
  </style>
</head>
<body>
  <h1 align="center">Welcome To Jaischool.com</h1>
  
    <div class="box"></div>
    <div class="box-1"></div>

    <div class="stick"></div>



  <script>
    $(document).ready(function(){
      $(".box, .box-1").draggable({
        opacity:'0.8',
        cursor:"move",
        snap:".stick",

      });
    });
  </script>

</body>
</html>

snapTolerance option

This defines what will be the distance between snap-element & draggable-element to stick with snap-element.

Example:-

<!DOCTYPE html>
<html>
<head>
  <title>snapTolerance property of draggable()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    .box{
      width:100px;
      height:100px;
      background-color:green;
      float:left;
      margin-right:10px;
    }
    .box-1{
      width:100px;
      height:100px;
      background-color:red;
      float:left;
    }
    .stick{
      width:500px;
      height:400px;
      border:3px groove red;
      float:right;
    }
  </style>
</head>
<body>
  <h1 align="center">Welcome To Jaischool.com</h1>
  
    <div class="box"></div>
    <div class="box-1"></div>

    <div class="stick"></div>



  <script>
    $(document).ready(function(){
      $(".box, .box-1").draggable({
        opacity:'0.8',
        cursor:"move",
        snap:".stick",
        snapTolerance:100,

      });
    });
  </script>

</body>
</html>

cancel option

This removes the draggable() method. All the draggable elements will be none-draggable when it is dragged in the element defined in the value of cancel option.

Example***

<!DOCTYPE html>
<html>
<head>
  <title>cancel property of draggable()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    .box{
      width:100px;
      height:100px;
      background-color:green;
      float:left;
      margin-right:10px;
    }
    .box-1{
      width:100px;
      height:100px;
      background-color:red;
      float:left;
    }
    .stick{
      width:500px;
      height:400px;
      border:3px groove red;
      float:right;
    }
  </style>
</head>
<body>
  <h1 align="center">Welcome To Jaischool.com</h1>
  
    <div class="box"></div>
    <div class="box-1"></div>

    <div class="stick"></div>

  <script>
    $(document).ready(function(){
      $("div").draggable({
        snap:'.stick',
        snapTolerance:100,
        cancel:'.stick',

      });
    });
  </script>

</body>
</html>

stack option

Applies the z-index property. If two elements are draggable then the element which is dragging will have highest z-index.

Example:-

<!DOCTYPE html>
<html>
<head>
  <title>stack property of draggable()</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    .box{
      width:100px;
      height:100px;
      background-color:green;
      float:left;
      margin-right:10px;
    }
    .box-1{
      width:100px;
      height:100px;
      background-color:red;
      float:left;
    }
    .stick{
      width:500px;
      height:400px;
      border:3px groove red;
      float:right;
    }
  </style>
</head>
<body>
  <h1 align="center">Welcome To Jaischool.com</h1>
  
    <div class="box"></div>
    <div class="box-1"></div>

    <div class="stick"></div>



  <script>
    $(document).ready(function(){
      $("div").draggable({
        snap:'.stick',
        snapTolerance:100,
        cancel:'.stick',
        stack:"div",

      });
    });
  </script>

</body>
</html>