«
»
How to make a DIV movable using JavaScript. An absolute positioned DIV can made movable by adding a bit of JavaScript logic. I have written a JavaScript to make a DIV movable, the size of the script is only 4KB. You can download the script with example: ...
Save to:

Movable DIV using JavaScript

How to make a DIV movable using JavaScript. An absolute positioned DIV can made movable by adding a bit of JavaScript logic.

I have written a JavaScript to make a DIV movable, the size of the script is only 4KB.

You can download the script with example:

The HTML for the DIV is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Moveable Div - www.Web-Tricks.info</title>
  <style type="text/css">
  <!--
  #testdiv {
  width: 286px;
  position: absolute;
  z-index: 1;
  background-color: #006;
  left: 283px;
  top: 211px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  color: #FFF;
  padding: 20px;
  cursor: move;
  }

  #testdiv a {
  color: #FFD;
  }
  -->
  </style>

  <script type="text/javascript" language="javascript" src="drag.js"></script>

  </head>

<body>

  <div id="testdiv" style="left: 283px; top: 211px;" onMouseDown="dragStart(event, this.id)";>

  <p>Moveable Div brought to you by</p>

  <p><a href="http://www.web-tricks.info">http://www.Web-Tricks.info</a></p>

  </div>

  </body>

  </html>

The JavaScript for moving the div is:

// Coded by Waseem Khan
// Developer at PakCoders
// Downloaded from http://www.Web-Tricks.info

function getID(id)
{
	return document.getElementById(id);
}

// Determine browser and version.

function Browser() {

  var ua, s, i;

  this.isIE    = false;
  this.isNS    = false;
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    return;
  }

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    return;
  }
}
var browser = new Browser();

var dragObj = new Object();
function dragStart(event, id) {
  var x, y;
  dragObj.elNode = getID(id);
  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Save starting positions of cursor and element.

  dragObj.cursorStartX = x;
  dragObj.cursorStartY = y;
  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);

  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;

  // Capture mousemove and mouseup events on the page.

  if (browser.isIE) {
    document.attachEvent("onmousemove", dragGo);
    document.attachEvent("onmouseup",   dragStop);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS) {
    document.addEventListener("mousemove", dragGo,   true);
    document.addEventListener("mouseup",   dragStop, true);
    event.preventDefault();
  }
}

function dragGo(event) {

  var x, y;

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Move drag element by the same amount the cursor has moved.

  dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
  dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";

  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS)
    event.preventDefault();
}

function dragStop(event) {

  // Stop capturing mousemove and mouseup events.

  if (browser.isIE) {
    document.detachEvent("onmousemove", dragGo);
    document.detachEvent("onmouseup",   dragStop);
  }
  if (browser.isNS) {
    document.removeEventListener("mousemove", dragGo,   true);
    document.removeEventListener("mouseup",   dragStop, true);
  }
}

This entry was posted on Friday, March 19th, 2010 at 6:03 pm and is filed under AJAX. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “Movable DIV using JavaScript”

  1. Hello Michael!

    The download link has been fixed, you can now download it again.

    Thanks.

  2. Excellent, thank you very much!

  3. Thank for the post.

  4. Outstanding! Thank you.

Leave a Reply