JavaScript Drag Div

June 28, 2017 1:23 pm by ATS Staff

Following is the plain (Vanilla) JavaScript code with which we can drag an HTML div tag:

<div id="toolbar" style="border: 1px solid #aaaaaa; padding: 5px; background-color: #f7f7f7; width: 200px; cursor: move;">
  ---
  ---
</div>

<script>

drag_div('toolbar');

function drag_div(div_id){
    var div;

    div = document.getElementById(div_id);

    div.addEventListener('mousedown', function(e) {
        div.isDown = true;
        div.offset = [
            div.offsetLeft - e.clientX,
            div.offsetTop - e.clientY
        ];
    }, true);

    div.addEventListener('mouseup', function() {
        div.isDown = false;
    }, true);

    div.addEventListener('mousemove', function(event) {
        event.preventDefault();
        if (div.isDown) {
            div.mousePosition = {

                x : event.clientX,
                y : event.clientY

            };
            div.style.left = (div.mousePosition.x + div.offset[0]) + 'px';
            div.style.top  = (div.mousePosition.y + div.offset[1]) + 'px';
        }
    }, true);
}

</script>