JQuery UI Interactions - Complete Guide



Hello dear readers! Welcome back to another edition of our tutorial on JQuery. In this tutorial post, we are going to be discussing about the JQuery Interactions in details.

So read through carefully and ask your questions where necessary.

Interaction Drag-able

Drag-able is used with interactions in JQueryUI. This function is used to enable dragable functionality on the JavaScript DOM element. In order to be able to drag this drag-able element, we have to click on it with the mouse.

Syntax

Following below is the syntax to use this method -

$( "#draggable" ).draggable( );         

Example

Following below is an example on how to use this method-

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               

          </script>

          <script  type = "text/javascript">
               $( function( )  {
                    $( "#draggable" ).draggable( ); 
               } ); 
          </script>

          <style>
               #draggable { width: 180px;   height:  180px;  padding:  0.6em;  }
               .back {
                    background-color: grey; 
                    width: 100px;
                    padding: 20px;
                    border:  20px  solid  navy;
                    margin: 25px; 
               }
          </style>

     </head>

     <body>
          <div  id = "draggable"  class = "ui-widget-content">
               <p  class = "back">Drag</p>
          </div>

     </body>
</html>

Output

Following below is the output of the above example -

jQuery Example
Drag



Interaction Drop-able

Drop-able is used with interactions in JQueryUI. This function is used to enable dropable functionality on the JavaScript DOM element. In order to be able to drop this drag-able element, we have to click on it with the mouse.

Syntax

Following below is the syntax to use this method -

$( "#droppable" ).droppable( );         

Example

Following below is an example on how to use this method-

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               

          </script>

          <script  type = "text/javascript">
               $( function( )  {
                    $( "#draggable" ).draggable( ); 

                    $( "#droppable" ).droppable( {
                         drop:  function( event,  ui ) {
                              $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
                         }
                    } );
               } ); 
          </script>

          <style>
               #draggable { width: 130px;   height:  130px;  padding:  0.6em; 
                    float: left;  margin:  8px  8px  8px  0; }
               #droppable { width: 170px;   height:  170px;  padding:  0.6em; 
                    float: left;  margin:  8px; }
          </style>

     </head>

     <body>
          <div  id = "draggable"  class = "ui-widget-content">
               <p>Drag</p>
          </div>

          <div  id = "droppable"  class = "ui-widget-header">
               <p  style = "background-color: gold;  height: 40>Drop here/p>

          </div>

     </body>
</html>

You can try the above code out to see the result for yourselves.

Interaction Resize-able

The Resize-able function is used with interactions in JQueryUI. This resize-able function can be used to enable resizeable functionality on the JavaScript DOM element. With the cursor grab the right or bottom border and drag it to the desired width or height.

Syntax

Following below is the syntax to use this method -

$( "#resizable" ).resizable( );         

Example

Following below is an example on how to use this method-

<!doctype  html>
<html  lang = "en">
     <head>
          <meta  charset = "utf-8">
          <title>jQuery Example</title>
          <link 
               href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"                
               rel = "stylesheet">
          <script  src = "https://code.query.com/jquery-1.10.2.js">
          </script>
          <script  src = "https://code.query.com/ui/1.10.4/jquery-ui.js">

          </script>

          <!-- CSS CODE  -->
          <style>
               .ui-widget-header  {
                    background: #b9cd6d;
                    border: 1px solid #b9cd6d;
                    color: #FFFFFF;
                    font-weight: bold;
               } 
  
               .ui-widget-content  {
                    background: #cedc98;
                    border: 1px solid #DDDDDD; 
                    color: #333333;
               }

              #resizable-14 { width: 150px;  height: 150px;  padding: 0.6em; 
                    text-align: center; margin: 0; }
          }

          <!--  JAVASCRIPT CODE -->

          <script  type = "text/javascript">
               $( function( )  {
                    $( "#resizable-14" ).resizable( {
                         create:  function( event,  ui ) {
                              $( "#resizable-15" ).text( "I'm Created!" );
                         },

                         resize:  function( event,  ui ) {
                              $(" #resizable-16" ).text( "top = "  +  ui.position.top  +
                                   ",  left = "  +  ui.position.left  +
                                   ",  width = "  +  ui.size.width  +
                                   ",  height = "  +  ui.size.height );
                         }
                    } );
               } ); 
          </script>

     </head>

     <body>
          <div  id = "resizable-14"  class = "ui-widget-content">
               <p  class = "ui-widget-header">Resize!</p>
          </div>

          <span  id = "resizable-15"></span><br />
          <span  id = "resizable-16"></span>
     
     </body>
</html>

You can try the above code out to see the result for yourselves.



Interaction Select-able

Selectable function can be used with interactions in JQueryUI. This selectable function can be used to enable selectable functionality on the JavaScript DOM element. Draw a box using your cursor to select items. Press and hold down the control key to make multiple non-adjacent selections.

Syntax

Following below is the syntax to use this method -

$( "#selectable" ).selectable( );         

Example

Following below is an example on how to use this method-

<html>
     <head>
          <title>jQuery Example</title>

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

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               

          </script>

          <script  type = "text/javascript">
               $( function( )  {
                    $( "#selectable" ).selectable( ); 
               } ); 
          </script>

          <style>
               #feedback { font-size: 1.8em;  }
               #selectable  .ui-selecting { background: #FECA40; }
               #selectable  .ui-selected  { background: #F39814;  color:  #FFFFFF; }
               #selectable  { list-style-type: none;  margin: 0;  padding:  0;  width: 70%; }
               #selectable  li  { margin: 3px;  padding:  0.5em;  font-size: 1.4em;  height: 20px; }
          </style>

     </head>

     <body>

          <ol  id = "selectable">
               <li  class = "ui-widget-content">Item 1</li>
               <li  class = "ui-widget-content">Item 2</li>  
               <li  class = "ui-widget-content">Item 3</li>
               <li  class = "ui-widget-content">Item 4</li>
               <li  class = "ui-widget-content">Item 5</li>
               <li  class = "ui-widget-content">Item 6</li>
               <li  class = "ui-widget-content">Item 7</li>
          </ol>

     </body>
</html>

You can try the above code out to see the result for yourselves.

Interaction Sort-able
Sort-able is used with interactions in JQueryUI. This function is used to enable sortable functionality on the JavaScript DOM element. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, the sortable items share draggable properties.

Syntax
Following below is the syntax to use this method -

$( function( )  { 
     $( "#sortable" ).sortable( ); 
     $( "#sortable" ).disableSelection( );   
} );

Example
Following below is an example on how to use this method-

<html>
     <head>
          <title>jQuery Example</title>

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

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">               

          </script>

          <script  type = "text/javascript">
               $( function( )  {
                    $( "#sortable" ).sortable( ); 
                    $( "#sortable" ).disableSelection( );
               } ); 
          </script>

          <style>
               #sortable { list-style-type: none; margin: 0;  padding: 0;  width:  80%; }
               #sortable  li  { margin: 0  4px  4px  4px;  padding: 0.6em;
                    padding-left: 1.6em;  font-size: 1.6em;  height: 20px; }
               #sortable  li  span { position: absolute;  margin-left: -1.5em; }
          </style>

     </head>

     <body>

          <ul  id = "sortable">
               <li  class = "ui-state-default"><span 
                     class = "ui-icon  ui-icon-arrowthick-2-n-s"></span>Item 1</li>
               <li  class = "ui-state-default"><span 

                     class = "ui-icon  ui-icon-arrowthick-2-n-s"></span>Item 2</li>
               <li  class = "ui-state-default"><span 

                     class = "ui-icon  ui-icon-arrowthick-2-n-s"></span>Item 3</li>
               <li  class = "ui-state-default"><span 

                     class = "ui-icon  ui-icon-arrowthick-2-n-s"></span>Item 4</li>
               <li  class = "ui-state-default"><span 

                     class = "ui-icon  ui-icon-arrowthick-2-n-s"></span>Item 5</li>
               <li  class = "ui-state-default"><span 

                     class = "ui-icon  ui-icon-arrowthick-2-n-s"></span>Item 6</li>
               <li  class = "ui-state-default"><span 

                     class = "ui-icon  ui-icon-arrowthick-2-n-s"></span>Item 7</li>
          </ul>

     </body>
</html>

You can try the above code out to see the result for yourselves.


Alright guys! This is where we are rounding up for this tutorial post. In our next tutorial guide, we are going to be discussing about the complete list of jQuery UI Widgets.

Do feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.