I have adapted code from http://dunnbypaul.net/js_mouse/
I want to use a button to create new draggable divs but i keep getting error "is null or not an object"
heres the code
I want to use a button to create new draggable divs but i keep getting error "is null or not an object"
heres the code
Code:
<html>
<head>
<title>Drag and drop module</title>
<style type="text/css">
#canvas {
margin:auto;
padding:0px;
position: absolute;
background-color:grey;
border:dashed gray 1px;
top: 5px;
margin:auto;
padding:0px;
width:100%;
height:400px;
float:left;
font-size: 8px;
font-family:Arial, Helvetica, sans-serif;
overflow: hidden;
}
#controls {
margin:auto;
padding:10px;
position: absolute;
width:100%;
top:415px;
float:left;
background: grey;
border:dashed black 1px;
height: 150px;
}
#newObject {
position: absolute;
left: 10px;
top: 10px;
background-color:green;
border:solid gray 1px;
margin:10px;
padding:4px;
width:50px;
height:50px;
float:left;
zIndex:1;
cursor:pointer;
font-size: 8px;
font-family:Arial, Helvetica, sans-serif;
}
</style>
<script type = "text/javascript">
function createObject (){
cv = document.getElementById("canvas");
var newObject = document.createElement('div');
newObject.Class = "newObject";
newObject.id = "newObject";
cv.appendChild(newObject);
newObject.onmousedown=grab(this);
}
var mousex = 0;
var mousey = 0;
var grabx = 0;
var graby = 0;
var orix = 0;
var oriy = 0;
var elex = 0;
var eley = 0;
var algor = 0;
var dragobj = null;
function falsefunc() { return false; } // used to block cascading events
function init()
{
document.onmousemove = update; // update(event) implied on NS, update(null) implied on IE
update();
}
function getMouseXY(e) // works on IE6,FF,Moz,Opera7
{
if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)
if (e)
{
if (e.pageX || e.pageY)
{ // this doesn't work on IE6!! (works on FF,Moz,Opera7)
mousex = e.pageX;
mousey = e.pageY;
algor = '[e.pageX]';
if (e.clientX || e.clientY) algor += ' [e.clientX] '
}
else if (e.clientX || e.clientY)
{ // works on IE6,FF,Moz,Opera7
mousex = e.clientX + document.body.scrollLeft;
mousey = e.clientY + document.body.scrollTop;
algor = '[e.clientX]';
if (e.pageX || e.pageY) algor += ' [e.pageX] '
}
}
}
function update(e)
{
getMouseXY(e); // NS is passing (event), while IE is passing (null)
document.getElementById('xpos').value = elex;
document.getElementById('ypos').value = eley;
document.getElementById('object').value = dragobj ? (dragobj.id ? dragobj.id : 'unnamed object') : '(null)';
}
function grab(context)
{
document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection
dragobj = context;
dragobj.newObject.zIndex = 10; // move it to the top
document.onmousemove = drag;
document.onmouseup = drop;
grabx = mousex;
graby = mousey;
elex = orix = dragobj.offsetLeft;
eley = oriy = dragobj.offsetTop;
update();
}
function drag(e) // parameter passing is important for NS family
{
if (dragobj)
{
elex = orix + (mousex-grabx);
eley = oriy + (mousey-graby);
dragobj.newObject.position = "absolute";
dragobj.newObject.left = (elex).toString(10) + 'px';
dragobj.newObject.top = (eley).toString(10) + 'px';
}
update(e);
return false; // in IE this prevents cascading of events, thus text selection is disabled
}
function drop()
{
if (dragobj)
{
dragobj.style.zIndex = 0;
dragobj = null;
}
update();
document.onmousemove = update;
document.onmouseup = null;
document.onmousedown = null; // re-enables text selection on NS
}
</script>
</head>
<body onload="init();">
<div id = "canvas">
</div>
<div id = "controls">
<input type = "button" value = "New Object" onClick = "createObject()">
<input type = "text" value = "" name = "xpos" id = "xpos">
<input type = "text" value = "" name = "ypos" id = "ypos">
<input type = "text" value = "" name = "object" id = "object">
</div>
</body>
</html>
Comment