Drag and Drop in Jquery UI

Problem: Jquery UI provides APIs to make DOM elements draggable and droppable. We can do some things out of the box by using its APIs. I have written a Jquery code below in which a dragging div can be dropped to another div as droppable div’s child from another droppable div.

Steps:

1. First, you need to include jquery and jquery UI libraries in the header.

2. I have created two droppable divs with the class “drop” and one draggable div with the class “drag”. HTML code and CSS is written as below:

<!DOCTYPE html>
<html>
<head>
  <title>ColResizable</title>
   <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
   rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <style type="text/css">
    .drop{
      position: relative;
      height: 400px;
      background: lightblue;
    }
    .left{
      float:left;
    }
    .right{
      float: right;
    }
    .drag{
      position: absolute;
      height: 100px;
      width: 100px;
      background: green;
      z-index: 5;
    }
  </style>
</head>
<body>
  <div class="row">
   <div class=" left drop col-lg-4">
     <div class="drag">
       I am draggable.
     </div>
   </div>
   <div class="right drop col-lg-4">
     I am dropable.
   </div>
  </div>
</body>
</html>

3. I have written Jquery code as below for above HTML code:

<script type="text/javascript">
    $(document).ready(function(){
    $(".drag").draggable({ cursor: 'move',
    helper: "clone"});
     $(".drop").droppable({drop: function(event, ui) {
      console.log(ui.draggable);
          $(ui.draggable).appendTo($(this));
        }
      });
});
  </script>

4. In the Jquery code draggable() function is to make div with class “drag” draggable. It has some options to set draggable functionalities. I have not used all. You can check other options on Jquery UI documentation. “Cursor:move” options will change the cursor when we will drag the element and “helper:clone” is used to make the clone of draggable div on dragging.

5. On the other hand droppable() function is used to make divs with class “drop” droppable. It will allow them to accept the draggable div. In droppable I have used “drop” option which is defined as a function. This function will run whenever draggable element will be dropped to a droppable element. In this code when a draggable div will be dropped to the droppable element then it will append it. Below are the screenshots of the example:

Here you can see that there is green div in the first container which is draggable and both sky blue divs are droppable elements. When I will drag it to the right container it will be appended to the right container and will be removed from the left container as shown below:

In this, I am dragging the draggable div and its clone is dragged as I have set draggable “helper” option as “clone” so it is cloning while dragging:

In this, image div is dragged to another div and it is removed from the left container and appended to the right container.

Drag and Drop in Jquery UI

Related posts:

Leave a Reply Cancel reply