the code is suppose to allow the user to drag the box.
when you press the box and the move the mouse the box is suppose to move.
I know it is not suppose to work in firefox, but it doesn't work for me in chrome as well.
Why?
Code:
<html>
<head>
<title>DragAndDrop</title>
<script language="JavaScript">
var boolDrag ;
boolDrag = false ;
function dragIt() {
if (event.srcElement.name == "khakiBox") {
boolDrag = true ;
}
}
function dropIt() {
boolDrag = false ;
}
function moveIt() {
if (boolDrag) {
document.all.khakiBox.style.top = event.y ;
document.all.khakiBox.style.left = event.x ;
}
}
</script>
</head>
<style type="text/css">
#khakiBox
{
position : absolute ;
height : 150 ;
width : 150 ;
background-color : khaki ;
top : 100px ;
left : 100px ;
z-index : 1 ;
visibility : visible ;
}
</style>
<body onmousedown = "dragIt()"
onmouseup = "dropIt()"
onmousemove = "moveIt()" >
<div id="khakiBox" name="khakiBox">
<p align="center">
some text
</p>
</div>
</body>
</html>
02-13-2012, 02:22 PM
acestuff
I haven't looked into it but I strongly suspect that the problem is within the "moveIt" method.
It uses "event", which unless it is a property of window (i.e. window.event) it is not in scope.
I believe in IE, window.event is defined, whereas in all other normal browsers (:p) it is not. Instead the event is passed to the listener. Therefore, to get that script to work moveIt should take event as a parameter (and may also have to use different properties of it, I can't remember exactly...)
