How to make a DIV Movable (Draggable)?

dragme

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>

 

4 thoughts on “How to make a DIV Movable (Draggable)?

Leave a Reply

Theme: Overlay by Kaira
Agurchand