Draggable div Using Jquery
Div tag Drag or move One place to another place Using JQuery in Asp.Net.
DEMO
Download
HTML Coding
Div tag Drag or move One place to another place Using JQuery in Asp.Net.
DEMO
Download
HTML Coding
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Draggable or Movable div Using Jquery in Asp.Net</title>
<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#div1").draggable();
$("#div2").draggable();
$("#div3").draggable();
$("#div4").draggable();
});
</script>
<style type="text/css">
.div01
{
color:greenyellow;
padding: 20px;
width: 25px;
height: 25px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
border: solid 5px #ccc;
}
.div02
{
color:lightpink;
padding: 20px;
width: 25px;
height: 25px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
border: solid 5px #ccc;
}
.div03
{
color:maroon;
padding: 20px;
width: 25px;
height: 25px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
border: solid 5px #ccc;
}
.div04
{
color:blueviolet;
padding: 20px;
width: 25px;
height: 25px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
border: solid 5px #ccc;
}
</style>
</head>
<body>
<div align="center">
<div id="div1" class="div01">
3
</div>
<div id="div2" class="div02">
2
</div>
<div id="div3" class="div03">
4</div>
<div id="div4" class="div04">
1</div></div>
</body>
</html>
First Add New Webform - Add Required div tag &
JQuery Plugins
Next - Add Css Class to Div Tag
No comments:
Post a Comment