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>

<head>

<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>


<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; }
}



<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>

<p class = "ui-widget-header">Resize!</p>

</div>

</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.

WebDesignTutorialz

JQuery UI Interactions - Complete Guide

Interaction Drag-able

Syntax

Example

Output

Interaction Drop-able

Syntax

Example

Interaction Resize-able

Syntax

Example

Interaction Select-able

Syntax

Example

Interaction Sort-able

Syntax

Example

Post a Comment

Get new posts by email:

Python Tkinter Colors

Html Layout

Python Tkinter Relief Styles

WordPress Optimization Tips Tutorial

Html-Comments