Snippet Name: Drag And Drop Example
Description: Simple, easy-to-modify drag and drop code.
Comment: (none)
Language: JAVASCRIPT
Highlight Mode: JAVASCRIPT
Last Modified: February 27th, 2009
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Simple Drag and Drop</title>
<script type="text/javascript">
VAR IE = document.all?TRUE:FALSE;
IF (!IE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMouseXY;
VAR tempX = 0;
VAR tempY = 0;
VAR clicked = 0;
VAR rclicked = 0;
VAR diffX = 0;
VAR diffY = 0;
VAR diffRX = 0;
VAR diffRY = 0;
VAR origH = 0;
VAR origW = 0;
VAR box = 0;
VAR boxR = 0;
FUNCTION getMouseXY(e){
IF(IE){
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}ELSE{
tempX = e.pageX;
tempY = e.pageY;
}
IF (tempX < 0){tempX = 0;}
IF (tempY < 0){tempY = 0;}
RETURN TRUE;
}
FUNCTION Drag(yesno, boxID){
clicked = yesno;
IF(yesno){
box = document.getElementById(boxID);
diffY = tempY - parseInt(box.style.top);
diffX = tempX - parseInt(box.style.left);
}
}
FUNCTION Resize(yesno, boxobj){
rclicked = yesno;
IF(yesno){
boxR = boxobj;
diffRY = tempY;
diffRX = tempX;
origH = boxR.style.height;
origW = boxR.style.width;
}
}
FUNCTION DragResize(){
IF(clicked == 1){
box.style.top = (tempY - diffY) + 'px';
box.style.left = (tempX - diffX) + 'px';
}
ELSE IF(rclicked == 1){
boxR.style.height = parseInt(origH) + (tempY - diffRY) + 'px';
boxR.style.width = parseInt(origW) + (tempX - diffRX) + 'px';
}
}
</script>
<style type="text/css">
.border
{
position: absolute;
cursor: se-resize;
background: #ccc;
border: 1px solid #000;
z-index: 5;
padding: 3px;
}
.block{
cursor: default;
background: #ccc;
width: 100%;
height: 100%;
z-index: 10;
}
</style>
</head>
<body onmousemove="DragResize()">
<!-- Start Row 1 -->
<div id="box1" class="border" style="top:100px;left:100px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box1');" onmouseup="Drag('0','box1');"></div></div>
<div id="box2" class="border" style="top:100px;left:160px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box2');" onmouseup="Drag('0','box2');"></div></div>
<div id="box3" class="border" style="top:100px;left:220px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box3');" onmouseup="Drag('0','box3');"></div></div>
<!-- End Row 1 -->
<!-- Start Row 2 -->
<div id="box4" class="border" style="top:160px;left:100px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box4');" onmouseup="Drag('0','box4');"></div></div>
<div id="box5" class="border" style="top:160px;left:160px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box5');" onmouseup="Drag('0','box5');"></div></div>
<div id="box6" class="border" style="top:160px;left:220px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box6');" onmouseup="Drag('0','box6');"></div></div>
<!-- End Row 2 -->
<!-- Start Row 3 -->
<div id="box7" class="border" style="top:220px;left:100px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box7');" onmouseup="Drag('0','box7');"></div></div>
<div id="box8" class="border" style="top:220px;left:160px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box8');" onmouseup="Drag('0','box8');"></div></div>
<div id="box9" class="border" style="top:220px;left:220px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box9');" onmouseup="Drag('0','box9');"></div></div>
<!-- End Row 3 -->
</body>
</html> |
