Hey dudes,
Quick question. I'm making a drag n' drop script from scratch (hard D  and this is what I have:
HTML Code:
<script language="javascript">
function getMousePos() {
if (dragIt==true) {
mouseX.value = window.event.clientX;
mouseY.value = window.event.clientY;
dragBox.style.top = mouseY.value+"px";
dragBox.style.left = mouseX.value+"px";
dragBox.innerHTML="<table height='100%' width='100%' summary='drag'><tr><td style='text-align:center;' valign='center'>Dragging...</td></tr></table>";
}
else {dragBox.innerHTML="";}
}
function dragging(divToDrag) {
dragIt=true;
}
function stopdragging(divToStopDragging) {
dragIt=false;
}
</script>
<body onmousemove="getMousePos();">
<input type="text" style="display:none;position:absolute;" id="mouseX" style="border:none;">
<input type="text" style="display:none;position:absolute;" id="mouseY" style="border:none;">
<div onselectstart="return false" class="draggable" id="dragBox" onmousedown="dragging(this.id)" onmouseup="stopdragging(this.id)" style="z-index:1000;position:absolute;background:red;padding:20px;width:100px;height:100px;"></div>
<br /><br /><br /><br />
<div onselectstart="return false" class="draggable" id="dragBox2" onmousedown="dragging(this.id)" onmouseup="stopdragging(this.id)" style="z-index:1000;position:absolute;background:blue;padding:20px;width:100px;height:100px;"></div>
A lot, I know. Just copy it into the tryit editor :P
But as you can see, getMousePos() is this:
function getMousePos() {
if (dragIt==true) {
mouseX.value = window.event.clientX;
mouseY.value = window.event.clientY;
dragBox.style.top = mouseY.value+"px";
dragBox.style.left = mouseX.value+"px";
dragBox.innerHTML="<table height='100%' width='100%' summary='drag'><tr><td style='text-align:center;' valign='center'>Dragging...</td></tr></table>";
}
else {dragBox.innerHTML="";}
}
But that only will work on the div which id is 'dragBox'. I tried replacing the 'dragBox's with 'this.id', but that doesn't work D:. What am I doing wrong?  |
