Wednesday, May 13, 2020

JQuery UI Interactions - Complete Guide



Hello guys! Welcome to a new section of my tutorial on JQuery. In this tutorial post, am going to be discussing about the JQuery Interactions in details.

So read through carefully and ask questions too where necessary. I will attend to your questions as soon as possible.

Interaction Drag-able

The Drag-able function can be used along side with interactions in JQueryUI. This function can be used in enabling 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

Below is the syntax to use this method -

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

Example

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

Below is the output of the above example -

jQuery Example
Drag



Interaction Drop-able

The Drop-able function can be used along side with interactions in JQueryUI. This function can be 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

Below is the syntax to use this method -

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

Example

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 can be used along side with interactions in JQueryUI. This function can be used to enable resizeable functionality on the JavaScript DOM element. With the cursor grab the right or bottom border and drag to the desired width or height.

Syntax

Below is the syntax to use this method -

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

Example

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

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

Syntax

Below is the syntax to use this method -

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

Example

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
The Sort-able function can be used along side with interactions in JQueryUI. This function can be used in enabling 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, sortable items share draggable properties.  

Syntax
Below is the syntax to use this method -

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

Example
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 wrapping it up for this tutorial. In my next tutorial post, we are going to be looking into the JQuery widgets. If in any way you found this tutorial helpful, then you can use the share button to share this tutorial.

Follow us on our various social media platforms (facebook, twitter, instagram, pinterest, linkedin) in order to stay updated with our tutorials. Also click on the subscribe button to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now. 
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.