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 seems to be incomplete without an element, which would serve as a container. Here, in this article we will create a Draggable, movable and Resizable DOM element, such as a DIV, using JQuery functions like draggable() and resizable().

The DIV serves as a container to other elements and we can shift or relocate its position on a web page, by simply dragging or moving it on the page. We can resize the DIV depending upon the number of elements that occupy space inside it.

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. The primary purpose of these elements is to serve as a container. Therefore, we have two “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 element is dragged, it will move all newly created DIVs along with it.

The Markup
<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>
The Script
<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

Conclusion

You are now absolutely ready to make a dynamic web page with movable, draggable and resizable elements on it. Let us know your opinion about this article by leaving a message below and also you can write to us with your valuable suggestions and ideas.

comments powered by Disqus

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