You can enable resizable, draggable and droppable functionality on a dom element with the help of pre defined function like Resizable(), Draggable() and Droppable() in Jquery-UI.
Sometime you may require to make your div or other dom element resizable or draggable. You may want to make your element droppable on a placeholder element. Don't worry. Jquery-UI has pre-defined functions to do your tasks. In this article we will go through these functionalities one by one with simple and short examples. You can also navigate JQuery UI for more and detailed information.
JQuery UI is a powerful JQuery Plugin built on top of the jQuery JavaScript Library has a set of user interface interactions, effects, widgets, and themes which can be used to make your website interactive and effective. In this article I will talk about Resizable(, Draggable() and Droppable() methods which can help in making your element resizable, draggable and droppable respectively. In my example I have used index.html to show html content, util.js to put jquery stuffs and references of jquery-ui.js and jquery-ui.css files. First let's see these methods one by one.
You need jquery-ui.js and jquery-ui.css files to use Jquery-UI functionalities.
This method adds a capability to resize your dom element like div or p. Below the syntext to use this method.
Use $("#element" ).resizable(); to enable element to be resizable.
Let's implement it in our sample html. In example I have taken two divs. Both divs will adjust its widths with resize. I have also restricted minimum widths of these divs so that after specified width div may not be resized.
<div style="width:100%;float:left;margin-bottom:10px;">
<div style="background-color:#ECF1CE;padding:10px;font-size:larger; margin-bottom:5px;">Demo - Resize divs</div>
<div id="resizable" class="ui-widget-content" style="width:28%;float:left;background-color:#E9EBB8;height:200px;padding:1%;">
<h3>This is left section</h3>
<input type="text" />
</div>
<div id="resize" class="ui-widget-content" style="width:67%;float:right;background-color:#ECF1CE;height:200px;padding:1%;">
<h3>This is right section</h3>
<input type="text" />
</div>
</div>
$(function() {
$( "#resizable" ).resizable();
$( "#resizable" ).on("resize",function(){
var wLeft=$( "#resizable" ).width();
var wParent=$( "#dContainer" ).width();
var pLeft= 100*wLeft/wParent;
if(pLeft>20 && pLeft<75){
var wRight = wParent - wLeft;
var pRight= (100*wRight/wParent)-5;
}
else{
if(pLeft<20)
pLeft=20;
if(pLeft>75)
pLeft=75;
pRight= 95-pLeft;
}
$( "#resizable" ).css("width",pLeft+"%");
$( "#resize" ).css("width",pRight+"%");
});
});
This method adds a capability to drag your dom element anywhere on page. You can also set the draggable area for this element. That I will explain later. Below the syntext to use this method.
Use $("#element" ).draggable(); to enable element to be draggable.
Let's see how to implement this in code.
<div style="width:100%;float:left;margin-bottom:10px;">
<div style="background-color:#ECF1CE;padding:10px;font-size:larger; margin:5px 0px 5px 0px;">Demo - Draggable div</div>
<div style="width:98%;float:left;background-color:#E9EBB8;height:200px;padding:1%;">
<div id="drag" class="ui-widget-content">
Drag me
</div>
</div>
</div>
$(function() {
$("#drag" ).draggable({
cursor: "-webkit-grabbing",
containment: "parent"
});
});
This method adds a capability to drag and drop your dom element on other element like div or p. Below the syntext to use this method.
Use $("#element" ).droppable(); to make your element droppable.
Let's implement it in our sample html.
<div style="width:100%;float:left;margin-bottom:10px;">
<div style="background-color:#ECF1CE;padding:10px;font-size:larger; margin:5px 0px 5px 0px;">Demo - Droppable div</div>
<div style="width:98%;float:left;background-color:#E9EBB8;height:250px;padding:1%;">
<div id="drag1" class="ui-widget-content">
Drag me
</div>
<div id="drop" class="ui-widget-header">
<p>Drop here</p>
</div>
</div>
</div>
$(function() {
$("#drag1" ).draggable({
cursor: "-webkit-grabbing",
containment: "parent"
});
$( "#drop" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "udropped" )
.find( "p" )
.html( "Dropped! Can't move now." );
$("#drag1" ).draggable({
disabled: true
});
}
});
});
Full code looks like this.
<html>
<head>
<title>Resizable, Draggable and Droppable in Jquery</title>
<script type="text/javascript" src="JS/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="JS/jquery-ui.js"></script>
<script type="text/javascript" src="JS/util.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
<style>
#drag,#drag1{
background:#ECF1CE;
width:100px;
height:100px;
padding:10px;
cursor: -webkit-grab;
float:left;
}
#drop{
width:200px;
height:180px;
float:left;
}
.dropped{background-color:#ccc;
}
</style>
</head>
<body>
<div id="dContainer" style="float:left;width:100%">
<div style="width:100%;float:left;margin-bottom:10px;">
<div style="background-color:#ECF1CE;padding:10px;font-size:larger; margin-bottom:5px;">Demo - Resize divs</div>
<div id="resizable" class="ui-widget-content" style="width:28%;float:left;background-color:#E9EBB8;height:200px;padding:1%;">
<h3>This is left section</h3>
<input type="text" />
</div>
<div id="resize" class="ui-widget-content" style="width:67%;float:right;background-color:#ECF1CE;height:200px;padding:1%;">
<h3>This is right section</h3>
<input type="text" />
</div>
</div>
<div style="width:100%;float:left;margin-bottom:10px;">
<div style="background-color:#ECF1CE;padding:10px;font-size:larger; margin:5px 0px 5px 0px;">Demo - Draggable div</div>
<div style="width:98%;float:left;background-color:#E9EBB8;height:200px;padding:1%;">
<div id="drag" class="ui-widget-content">
Drag me
</div>
</div>
</div>
<div style="width:100%;float:left;margin-bottom:10px;">
<div style="background-color:#ECF1CE;padding:10px;font-size:larger; margin:5px 0px 5px 0px;">Demo - Droppable div</div>
<div style="width:98%;float:left;background-color:#E9EBB8;height:250px;padding:1%;">
<div id="drag1" class="ui-widget-content">
Drag me
</div>
<div id="drop" class="ui-widget-header">
<p>Drop here</p>
</div>
</div>
</div>
</div>
</body>
</html>
$(function() {
$("#drag" ).draggable({
cursor: "-webkit-grabbing",
containment: "parent"
});
$("#drag1" ).draggable({
cursor: "-webkit-grabbing",
containment: "parent"
});
$( "#drop" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "udropped" )
.find( "p" )
.html( "Dropped! Can't move now." );
$("#drag1" ).draggable({
disabled: true
});
}
});
$( "#resizable" ).resizable();
$( "#resizable" ).on("resize",function(){
var wLeft=$( "#resizable" ).width();
var wParent=$( "#dContainer" ).width();
var pLeft= 100*wLeft/wParent;
if(pLeft>20 && pLeft<75){
var wRight = wParent - wLeft;
var pRight= (100*wRight/wParent)-5;
}
else{
if(pLeft<20)
pLeft=20;
if(pLeft>75)
pLeft=75;
pRight= 95-pLeft;
}
$( "#resizable" ).css("width",pLeft+"%");
$( "#resize" ).css("width",pRight+"%");
});
});
You can also download code from above Download Code button. It was very simple to implement. Hope you liked this article. You can try other attributes also as per your need. Please try this and use in your code.
