Draggable, Movable and Resizable HTML DOM elements using jQuery

← PrevNext →

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). I am dedicating this article with a solution on creating an HTML DOM element that you can re-size, drag or move anywhere on your web page, using jQuery.

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

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.

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


Read more about DOM

It’s a very simple script. However, it will provide the necessary platform for programmers who wish to design a web page dynamically.

The DOM elements that I have mentioned above, are commonly used elements. The primary purpose of these elements is to serve as a container. Therefore, I have added two “DIV” elements in the script to work with.

Also Read: Dynamically Add and Remove HTML Elements using jQuery

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 drag and resize the element.

Many online banks restrict their users to click the refresh or back button, as it might hinder or stop a transaction in process. Doing so, the bank or the client might lose valuable data in the process.

I'll also create 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 Code
    <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>
        #divContainer, #divResize { 
            border: dashed 1px #CCC; 
            width: 120px; 
            height: 120px; 
            padding: 5px; 
            margin: 5px; 
            cursor: move; 
            float: left 
        <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 

    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'.

            iCnt = iCnt + 1;
Try it

Thanks for reading.

← PreviousNext →