Draggable, Movable and Resizable HTML DOM elements using JQuery

August 09th, 2013
In one of our previous articles, we have discussed about how we can create HTML elements dynamically using JQuery. The article looked incomplete without the containers in which the elements can be filled. So, here we will write a small script about creating “Draggable” or you can also say “Movable” and “Resizable” DOM elements like a DIV, using JQuery.

DOM (Document Object Model)

The “Document Object Model” or popularly known as “DOM” is an API for HTML documents. It defines how the elements can be manipulated and structured.

A “DOM” structure

<html>	
	<head>
		<body>
			<div></div>
		</body>
	</head>
</html>

Read more about DOM

The script is rather simple, but it will provide the necessary platform for programmers who can design a web page dynamically.

The DOM elements, which we have mentioned above, are very much common. There primary purpose is to serve as a container. So we have 2 “DIV” elements in our script to work with. The first element is just “draggable” and the second element can be “dragged” as well as “resized”.

We will also creating dynamic “DIV” elements which are “draggable” too. These elements will be attached to the first “DIV” element using JQuery “.appendTo()” method. The newly created “div” can be dragged anywhere on web page, but when the “first” div is dragged, it will move all the other newly created div along with it.

The Markup with the Script
<html>
<head>
    <title>Draggable, Moveable and Resizable DIV using JQuery</title>
    
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/
            jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"</script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"</script>
    
    <style> #divContainer, #divResize { border:dashed 1px #CCC; width:120px; height:120px; 
        padding:5px; margin:5px; font:13px Arial; cursor:move; float:left } </style>
</head>
<body>
    <div>
        <div id="divContainer"> I am Draggable </div>
            <input type="button" style="float:left"  id="btClickMe" value="Create more draggable DIV's" />
        <div id="divResize"> I am Draggable and Resizable </div>
    </div>
</body>
<script>
    var element_pos = 0;    // POSITION OF THE NEWLY CREATED ELEMENTS.
    var iCnt = 0;
    $(document).ready(function() {
        $(function() { $('#divContainer').draggable(); });
        $(function() { $("#divResize").draggable().resizable(); });

        // CREATE MORE DIV, WITH 'ABSOLUTE' POSITIONING.
        $('#btClickMe').click(function() {
            var dynamic_div = $(document.createElement('div')).css({
                border: '1px dashed', position: 'absolute', left: element_pos, top: $('#divContainer').height() + 20,
                width: '120', height: '120', padding: '3', margin: '0'
            });
            element_pos = element_pos + $('#divContainer').width() + 20;

            $(dynamic_div).append('You can drag me too');
            
            // APPEND THE NEWLY CREATED DIV TO "divContainer".
            $(dynamic_div).appendTo('#divContainer').draggable();   

            iCnt = iCnt + 1;
        });
    });
</script>
</html>

Demo

comments powered by Disqus

Join our Google Plus Community and be a part of a discussion!