Draggable, Movable and Resizable HTML DOM elements using jQuery

jquery

← PrevNext →

Tools you can use

Last updated: 20th December 2023

In one of my previous articles, I have explained with an example on how to create HTML element dynamically using jQuery. It is one of the most popular articles in this blog. With its popularity came many questions and one specifically on how to create a Draggable, Movable and Resizable HTML element, which would serve as container (to all other elements). Therefore, I am sharing an article showing how to create DIV elements dynamically and make it draggable, moveable and resizable using jQuery.

The jQuery functions that I am going to use here are jQuery draggable() and resizable().

A "<div>" elements serves as a container to other elements. I'll show you we can shift or relocate its position on a web page, by simply "dragging" or "moving" it anywhere on a web page. We can also resize the DIV depending upon the number of elements that occupy space inside it.

See this demo

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

In the example below, I have two <div> elements.

The first element is simply draggable, that is, you can drag the element anywhere on the web page. However, the second is multi functional, that is, you can "drag" and "resize" the element.

I'll also create dynamic DIV elements, which are also "draggable". These elements will be attached to the first DIV element using jQuery .appendTo() method.

The newly that are created dynamically, can be dragged anywhere on a web page, but when the first element is dragged, it will move all newly created DIVs along with it.

Let's see the example.

The Markup and the Script
<html>
<head>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://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; 
            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 'disContainer'.
            $(dynamic_div).appendTo('#divContainer').draggable();

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

Now you know how to create a draggable and movable element.

But, do you know you can limit the draggable area of an element using jQuery UI. Yes you can. See this example

Happy coding. 🙂

← PreviousNext →