<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<!--************************************************** **********************-->
<!--* Generic Drag Demo *-->
<!--* *-->
<!--* Copyright 2001 by Mike Hall *-->
<!--* Please see http://www.brainjar.com for terms of use. *-->
<!--************************************************** **********************-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>BrainJar.com: Generic Drag Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/common/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.box {
background-color: #ffff00;
border: 1px solid #000000;
color: #000000;
padding: 0px;
position: absolute;
}
.bar {
background-color: #008080;
color: #ffffff;
cursor: move;
font-weight: bold;
padding: 2px 1em 2px 1em;
}
.content {
padding: 1em;
}
</style>
<script type="text/javascript">//<![CDATA[
//************************************************** ***************************
// Do not remove this notice.
//
// Copyright 2001 by Mike Hall.
// See http://www.brainjar.com for terms of use.
//************************************************** ***************************
// 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;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
// Treat any other "Gecko" browser as NS 6.1.
s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}
var browser = new Browser();
// Global object to hold drag information.
var dragObj = new Object();
dragObj.zIndex = 0;
function dragStart(event, id) {
var el;
var x, y;
// If an element id was given, find it. Otherwise use the element being
// clicked on.
if (id)
dragObj.elNode = document.getElementById(id);
else {
if (browser.isIE)
dragObj.elNode = window.event.srcElement;
if (browser.isNS)
dragObj.elNode = event.target;
// If this is a text node, use its parent element.
if (dragObj.elNode.nodeType == 3)
dragObj.elNode = dragObj.elNode.parentNode;
}
// 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;
// Update element's z-index.
dragObj.elNode.style.zIndex = ++dragObj.zIndex;
// 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);
}
}
//]]></script>
</head>
<body>
<!-- Normal page content. -->
<div id="demoBox">
<h3>Generic Drag Demo</h3>
<p>This page contains three absolutely positioned elements and one relatively
positioned element, all of which can be dragged around the browser window.</p>
<p>Use your browser's <code>View Source</code> option to see the full source
code.</p>
</div>
<p style="border:1px solid #000000;width:12em;text-align:center;"
onmousedown="dragStart(event, 'boxC')">Drag Box C</p>
<div id="boxA" class="box content" style="left:400px;top:50px;width:12em;"
onmousedown="dragStart(event)">
This is Box A, drag it.
</div>
<div id="boxB" class="box" style="left:400px;top:150px;">
<div class="bar" style="width:12em;"
onmousedown="dragStart(event, 'boxB')">Drag Box B</div>
<div class="content" style="width:12em;">This is Box B, drag it using the bar above.</div>
</div>
<div id="boxC" class="box content" style="left:400px;top:250px;width:12em;">
This is Box C, drag it using the box at left.
</div>
<div id="boxD" class="box content" style="position:relative;left:0px;top:0px;width:12em;"
onmousedown="dragStart(event)">
This is Box D which is relatively positioned, drag it.
</div>
</body>
</html>