JQuery UI Draggable-Droppable

In this article and the rest of the articles in this series, we shall explore one of the most popular JQuery framework i.e. JQuery UI. You might want to drag elements on your screen with the help of your mouse, you may also want to drop your one div element to other and so on and so forth. JQuery, provides such functionalities. This article explains how you can make any HTML drag-able and drop-able using JQuery UI draggable-droppable functions. By drag-able element, we mean any element which can be dragged on the screen with the help of mouse. Drop-able element is any element where any drag-able element can be placed.

To use JQuery UI in your webpages add the following lines of code in the head section under the link to JQuery.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

JQuery UI Draggable

To make any element drag-able, select the element and simply call draggable() function on the element. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Draggable</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    
    <script type = "text/javascript">
        
         $(function() {
            $( ".circle" ).draggable();
         });
      </script>
    
     <style>
      
         .circle{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            border-radius: 100%;
            margin: 25px;
         }
      </style>
     
   
</head>
    
<body>

    <h1>Click and Drag</h1>
 <div class = "circle">
      </div>
    
    
    
</body>

</html>

Download Code Run Code

The above code contains a circle with class circle. In the scripts section in the header you can see that draggable() function is called on the elements with class circle. You can drag this circle anywhere on the screen.

JQuery UI Droppable

Elements that are draggable can also be dropped into other elements. Such elements where other elements can be dropped are called droppable. To make any element droppable simply select the element and call droppable function on it. You can also pass optional parameters to the droppable element. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Droppable</title>
    <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    
    <style>
         #small { 
           width: 150px;
             height: 150px;
             border-radius: 100%;
             padding: 25px;
             border-radius: 100%;
             text-align: center;
         }
         #large { 
           width: 200px;
             height: 200px;
             padding: 25px;
             border-radius: 100%;
             text-align: center;
         }
      </style>
      <script>
         $(function() {
            $( "#small" ).draggable();
             
            $( "#large" ).droppable({
            drop: function( event, ui ) {
               $( this )
               .addClass( "ui-state-highlight" )
               .find( "p" )
               .html( "Circle Dropped" );
            }
            });
         });
      </script>
   </head>
   <body>
      <div id="small" class="ui-widget-content">
         <p>Drag me to my big circle</p>
      </div>
      <div id="large" class="ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

Download Code Run Code

When you run the above code, you shall see a small grey circle which is draggable and a large orange circle which is droppable. When you drag the small circle and drop it onto the big circle, you will see the color of big circle turning light. This means the element has been successfully dropped.

<<< JQuery Ajax GetJQuery UI Resizeable >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .