Creating Draggable HTML Element Panes With Javascript

Updated on 7/13/2008.

If you're an aspiring javascript developer, a truly powerful object worth familiarizing yourself with is the event object. Capable of capturing and controlling almost any form of communication between an internet surfer and your website, the event object can turn your static HTML page into one powerful app.

To demonstrate some of the cool features that you can create with the event object, here's a script/demo that gives HTML elements the ability to be dragged around the page with your mouse. Feel free to try it out yourself by clicking on one of the elements/panes below and moving it around:

Hello!

Please keep in mind that these are the simpler draggable panes as the entire area within the pane can be clicked on for dragging. Things get a little more interesting if you have a pane where only certain areas are designated as the points where you can click and drag the pane around. To see these kinds of panes in action, please visit the test page linked to below. The source code of the demo page is also available for viewing further in this article.

Demo

This script was successfully tested in Windows versions of Internet Explorer 5.01 - 7, Firefox 1.5 - 3, Opera 9 and Safari 3.

<style>
.pane { 
    position: absolute; z-index: 2; 
}
</style>

<script type="text/javascript">
//<![CDATA[
//////////////////////////////////////////////////////////////////
// Script by Matt Murphy - MIT Style License
// For questions, comments and a live demo - please visit:
// http://www.matts411.com/webdev/creating_draggable_html_element_panes
//////////////////////////////////////////////////////////////////

var draggable = function () {
    var d_paneShell;
    var d_zDex = 3;
    var d_offsetX = 0;
    var d_offsetY = 0;

    return {
        setupPane : function (obj) {
            obj.onmousedown = draggable.activatePane;
            obj.onmouseover = null;
        },

        activatePane : function (e) {
            e = e || window.event;
            d_paneShell = e.target || e.srcElement;
            while (d_paneShell.tagName !== "BODY" && !/(^|\s)pane(\s|$)/.test(d_paneShell.className)) {
                d_paneShell = d_paneShell.parentNode;
            }
            if (d_paneShell.tagName !== "BODY") {
                d_paneShell.style.zIndex = d_zDex++;
                d_offsetX = e.clientX - d_paneShell.offsetLeft;
                d_offsetY = e.clientY - d_paneShell.offsetTop;
                if (window.addEventListener) {
                    document.addEventListener("mouseup", draggable.deactivatePane, false);
                    document.addEventListener("mousemove", draggable.dragPane, false);
                } else {
                    document.attachEvent("onmousemove", draggable.dragPane);
                    document.attachEvent("onmouseup", draggable.deactivatePane);
                }
            }
            return false;
        },

        dragPane : function (e) {
            e = e || window.event;
            d_paneShell.style.left = (e.clientX - d_offsetX) + "px";
            d_paneShell.style.top = (e.clientY - d_offsetY) + "px";
            return false;
        },

        deactivatePane : function () {
            if (window.addEventListener) {
                document.removeEventListener("mousemove", draggable.dragPane, false);
                document.removeEventListener("mouseup", draggable.deactivatePane, false);
            } else {
                document.detachEvent("onmousemove", draggable.dragPane);
                document.detachEvent("onmouseup", draggable.deactivatePane);
            }
        }
    };
}();

//]]>
</script>

By capturing and controlling mouse initiated events over each pane, the panes are repositioned rapidly around the page as the pane gets dragged.

As always, questions and comments welcome.