mTorbin
05-14-2007, 07:54 PM
Hey all,
Before I start, here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>BASIC DRAG-AND-DROP DIVS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
function startDrag(mouseEvent) {
if(!mouseEvent) {
var mouseEvent = window.event;
}
var targetObject=mouseEvent.target?mouseEvent.target:mouseEvent.srcElement;
if(targetObject.className!='divPane') {
return;
}
offsetX = mouseEvent.clientX;
offsetY = mouseEvent.clientY;
if(!targetObject.style.left) {
targetObject.style.left = '0px';
}
if(!targetObject.style.top) {
targetObject.style.top = '0px';
}
coordX = parseInt(targetObject.style.left);
coordY = parseInt(targetObject.style.top);
drag = true;
document.onmousemove = dragDiv;
}
function dragDiv(mouseEvent) {
if(!drag) {
return;
}
if(!mouseEvent) {
var mouseEvent = window.event;
}
var targetObject=mouseEvent.target?mouseEvent.target:mouseEvent.srcElement;
targetObject.style.left = coordX + mouseEvent.clientX - offsetX + 'px';
targetObject.style.top = coordY + mouseEvent.clientY - offsetY + 'px';
return false;
}
function stopDrag() {
drag = false;
}
window.onload = function() {
document.onmousedown = startDrag;
document.onmouseup = stopDrag;
}
function togglePane(paneName) {
if(document.getElementById(paneName).style.visibility == "hidden") {
document.getElementById(paneName).style.visibility = "visible";
}
else {
document.getElementById(paneName).style.visibility = "hidden";
}
}
</script>
<style type="text/css">
.divPane {
position: relative;
width: 500px;
height: 200px;
background-color: #ccc;
border: 2px solid #000000;
z-index: 3;
}
.divHead {
font-weight: bold;
width: 100%;
background-color: #999999;
height: 20px;
padding-left: 2px;
padding-top: 2px;
z-index: 1;
}
.divBody {
width: 100%;
padding-left: 2px;
padding-top: 2px;
z-index: 1;
}
</style>
</head>
<body>
<form>
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tr height="36" align="center">
<td><input name="showPane1" type="button" id="showPane1" value="Show Pane 1" onClick="togglePane('pane1')"></td>
<td><input name="showPane2" type="button" id="showPane2" value="Show Pane 2" onClick="togglePane('pane2')"></td>
<td><input name="showPane3" type="button" id="showPane3" value="Show Pane 3" onClick="togglePane('pane3')"></td>
<td><input name="showPane4" type="button" id="showPane4" value="Show Pane 4" onClick="togglePane('pane4')"></td>
</tr>
</table>
</form>
<div id="pane1" class="divPane" style="visibility:hidden">
<div class="divHead">Pane01</div><br>
<div class="divBody">This is my text. Please read this text. Yes, I wrote this text. This is my text. Please read this text. Yes, I wrote this text. This is my text. Please read this text. Yes, I wrote this text. This is my text. Please read this text. Yes, I wrote this text. This is my text. Please read this text. Yes, I wrote this text.</div>
</div>
</body>
</html>
The problem I'm having is that with the current code, you cannot drag the DIV unless you've clicked on the SPECIFIC div that is mentioned in the code. For example, one would think that because divPane contains divHead and divBody then clicking anywhere on the object would grab divPane, but this is not the case. How can I fix this?
Thanks,
Before I start, here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>BASIC DRAG-AND-DROP DIVS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
function startDrag(mouseEvent) {
if(!mouseEvent) {
var mouseEvent = window.event;
}
var targetObject=mouseEvent.target?mouseEvent.target:mouseEvent.srcElement;
if(targetObject.className!='divPane') {
return;
}
offsetX = mouseEvent.clientX;
offsetY = mouseEvent.clientY;
if(!targetObject.style.left) {
targetObject.style.left = '0px';
}
if(!targetObject.style.top) {
targetObject.style.top = '0px';
}
coordX = parseInt(targetObject.style.left);
coordY = parseInt(targetObject.style.top);
drag = true;
document.onmousemove = dragDiv;
}
function dragDiv(mouseEvent) {
if(!drag) {
return;
}
if(!mouseEvent) {
var mouseEvent = window.event;
}
var targetObject=mouseEvent.target?mouseEvent.target:mouseEvent.srcElement;
targetObject.style.left = coordX + mouseEvent.clientX - offsetX + 'px';
targetObject.style.top = coordY + mouseEvent.clientY - offsetY + 'px';
return false;
}
function stopDrag() {
drag = false;
}
window.onload = function() {
document.onmousedown = startDrag;
document.onmouseup = stopDrag;
}
function togglePane(paneName) {
if(document.getElementById(paneName).style.visibility == "hidden") {
document.getElementById(paneName).style.visibility = "visible";
}
else {
document.getElementById(paneName).style.visibility = "hidden";
}
}
</script>
<style type="text/css">
.divPane {
position: relative;
width: 500px;
height: 200px;
background-color: #ccc;
border: 2px solid #000000;
z-index: 3;
}
.divHead {
font-weight: bold;
width: 100%;
background-color: #999999;
height: 20px;
padding-left: 2px;
padding-top: 2px;
z-index: 1;
}
.divBody {
width: 100%;
padding-left: 2px;
padding-top: 2px;
z-index: 1;
}
</style>
</head>
<body>
<form>
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tr height="36" align="center">
<td><input name="showPane1" type="button" id="showPane1" value="Show Pane 1" onClick="togglePane('pane1')"></td>
<td><input name="showPane2" type="button" id="showPane2" value="Show Pane 2" onClick="togglePane('pane2')"></td>
<td><input name="showPane3" type="button" id="showPane3" value="Show Pane 3" onClick="togglePane('pane3')"></td>
<td><input name="showPane4" type="button" id="showPane4" value="Show Pane 4" onClick="togglePane('pane4')"></td>
</tr>
</table>
</form>
<div id="pane1" class="divPane" style="visibility:hidden">
<div class="divHead">Pane01</div><br>
<div class="divBody">This is my text. Please read this text. Yes, I wrote this text. This is my text. Please read this text. Yes, I wrote this text. This is my text. Please read this text. Yes, I wrote this text. This is my text. Please read this text. Yes, I wrote this text. This is my text. Please read this text. Yes, I wrote this text.</div>
</div>
</body>
</html>
The problem I'm having is that with the current code, you cannot drag the DIV unless you've clicked on the SPECIFIC div that is mentioned in the code. For example, one would think that because divPane contains divHead and divBody then clicking anywhere on the object would grab divPane, but this is not the case. How can I fix this?
Thanks,