Hi folks,
You wonder how to Make a <div> movable or draggable?. It is not a tough job if you use the jQuery Library.
Here I’m explaining how to make a DIV tag draggable inside a Container(one more div)!.
It’s very easy but keep in mind you need to include “jQuery” and “jQuery UI” scripts to make it work. Better always use Google jQuery link.
Just copy the below code to make it work right away!.
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<title>Movable (Draggable) DIV tag Tutorial Document</title>
<style>
#divcontainer{
border: 1px solid lightgray;
width: 500px;
height: 300px;
margin: 0 auto;
padding: 3px;
}
#makeitmove{
background: lightyellow;
width: 100px;
height: 100px;
border: 1px solid orange;
cursor: move;
}
</style>
<script>
$(document).ready(function(){
$("#makeitmove").draggable( {containment: "#divcontainer", scroll: false} );
});
</script>
</head>
<body>
<h3 align="center">TheOnlyTutorials.com - Draggable Resizable DIV Tag Tutorials</h3>
<div id="divcontainer">
<div id="makeitmove">Click and Drag me!</div>
</div>
</body>
</html>
Hi, I was wondering how to add an additional draggable div.
Wow. This is a great tutorial. This is really helpful. Thank you so much. Keep it up.
thank you
Thanks! Really helped!