"...is null or not an object" error when creating draggable divs

cleary1981

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

Expand|Select|Wrap|Line Numbers

 <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>

cleary1981

sorry just to be a little clearer.

Error:
Line: 116
Char: 3
error: 'dragobj.newObject' is null or not an object
code:0

acoder

"If you can solve this your a genius!!" is a brilliant title :D, but doesn't really describe the problem, so I've changed it.

Re. your problem: dragobj.newObject is incorrect. Replace newObject with style. See if that makes a difference.

cleary1981

yeah I have already tried that. I think the problem lies in the createObject function. Seems to be a problem assigning the onmousedown event.

acoder

Yeah, that should be:

Expand|Select|Wrap|Line Numbers

newObject.onmousedown=function(){grab(this);}

cleary1981

Quote:

Originally Posted by acoder

Yeah, that should be:

Expand|Select|Wrap|Line Numbers

newObject.onmousedown=function(){grab(this);}

Has anyone every told you you're some pup! :)

Thanks... you don't know how much that has helped

acoder

Glad I could help :)

"...is null or not an object" error when creating draggable divs

re: "...is null or not an object" error when creating draggable divs

re: "...is null or not an object" error when creating draggable divs

re: "...is null or not an object" error when creating draggable divs

re: "...is null or not an object" error when creating draggable divs

re: "...is null or not an object" error when creating draggable divs

re: "...is null or not an object" error when creating draggable divs

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about