By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,837 Members | 1,358 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,837 IT Pros & Developers. It's quick & easy.

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

100+
P: 178
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
  1. <html>
  2. <head>
  3. <title>Drag and drop module</title>
  4. <style type="text/css">
  5. #canvas {
  6.     margin:auto;
  7.     padding:0px;
  8.     position: absolute;
  9.     background-color:grey;
  10.     border:dashed gray 1px;
  11.     top: 5px;
  12.     margin:auto;
  13.     padding:0px;
  14.     width:100%;
  15.     height:400px;
  16.     float:left;
  17.     font-size: 8px;
  18.     font-family:Arial, Helvetica, sans-serif;
  19.     overflow: hidden;
  20. }
  21. #controls {
  22.     margin:auto;
  23.     padding:10px;
  24.     position: absolute;
  25.     width:100%;
  26.     top:415px;
  27.     float:left;
  28.     background: grey; 
  29.     border:dashed black 1px;
  30.     height: 150px;
  31. }
  32. #newObject {
  33.     position: absolute;
  34.     left: 10px;
  35.     top: 10px;
  36.     background-color:green;
  37.     border:solid gray 1px;
  38.     margin:10px;
  39.     padding:4px;
  40.     width:50px;
  41.     height:50px;
  42.     float:left;
  43.     zIndex:1;
  44.     cursor:pointer;
  45.     font-size: 8px;
  46.     font-family:Arial, Helvetica, sans-serif;
  47. }
  48. </style>
  49. <script type = "text/javascript">
  50. function createObject (){
  51.     cv = document.getElementById("canvas");
  52.     var newObject = document.createElement('div');
  53.     newObject.Class = "newObject";
  54.     newObject.id = "newObject";
  55.     cv.appendChild(newObject);
  56.     newObject.onmousedown=grab(this);    
  57.  
  58. }
  59.  
  60. var mousex = 0;
  61. var mousey = 0;
  62. var grabx = 0;
  63. var graby = 0;
  64. var orix = 0;
  65. var oriy = 0;
  66. var elex = 0;
  67. var eley = 0;
  68. var algor = 0;
  69.  
  70. var dragobj = null;
  71.  
  72. function falsefunc() { return false; } // used to block cascading events
  73.  
  74. function init()
  75. {
  76.   document.onmousemove = update; // update(event) implied on NS, update(null) implied on IE
  77.   update();
  78. }
  79.  
  80. function getMouseXY(e) // works on IE6,FF,Moz,Opera7
  81.   if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)
  82.  
  83.   if (e)
  84.   { 
  85.     if (e.pageX || e.pageY)
  86.     { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
  87.       mousex = e.pageX;
  88.       mousey = e.pageY;
  89.       algor = '[e.pageX]';
  90.       if (e.clientX || e.clientY) algor += ' [e.clientX] '
  91.     }
  92.     else if (e.clientX || e.clientY)
  93.     { // works on IE6,FF,Moz,Opera7
  94.       mousex = e.clientX + document.body.scrollLeft;
  95.       mousey = e.clientY + document.body.scrollTop;
  96.       algor = '[e.clientX]';
  97.       if (e.pageX || e.pageY) algor += ' [e.pageX] '
  98.     }  
  99.   }
  100. }
  101.  
  102. function update(e)
  103. {
  104.   getMouseXY(e); // NS is passing (event), while IE is passing (null)
  105.  
  106.   document.getElementById('xpos').value = elex;
  107.   document.getElementById('ypos').value = eley;
  108.   document.getElementById('object').value = dragobj ? (dragobj.id ? dragobj.id : 'unnamed object') : '(null)';
  109. }
  110.  
  111. function grab(context)
  112. {
  113.   document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection
  114.   dragobj = context;
  115.   dragobj.newObject.zIndex = 10; // move it to the top
  116.   document.onmousemove = drag;
  117.   document.onmouseup = drop;
  118.   grabx = mousex;
  119.   graby = mousey;
  120.   elex = orix = dragobj.offsetLeft;
  121.   eley = oriy = dragobj.offsetTop;
  122.   update();
  123. }
  124.  
  125. function drag(e) // parameter passing is important for NS family 
  126. {
  127.   if (dragobj)
  128.   {
  129.     elex = orix + (mousex-grabx);
  130.     eley = oriy + (mousey-graby);
  131.     dragobj.newObject.position = "absolute";
  132.     dragobj.newObject.left = (elex).toString(10) + 'px';
  133.     dragobj.newObject.top  = (eley).toString(10) + 'px';
  134.   }
  135.   update(e);
  136.   return false; // in IE this prevents cascading of events, thus text selection is disabled
  137. }
  138.  
  139. function drop()
  140. {
  141.   if (dragobj)
  142.   {
  143.     dragobj.style.zIndex = 0;
  144.     dragobj = null;
  145.   }
  146.   update();
  147.   document.onmousemove = update;
  148.   document.onmouseup = null;
  149.   document.onmousedown = null;   // re-enables text selection on NS
  150. }
  151.  
  152. </script>
  153. </head>
  154. <body onload="init();">
  155. <div id = "canvas">
  156. </div>
  157. <div id = "controls">
  158.     <input type = "button" value = "New Object" onClick = "createObject()">
  159.     <input type = "text" value = "" name = "xpos" id = "xpos">
  160.     <input type = "text" value = "" name = "ypos" id = "ypos">
  161.     <input type = "text" value = "" name = "object" id = "object">
  162.  
  163. </div>
  164. </body>
  165. </html>
Jul 9 '08 #1
Share this Question
Share on Google+
6 Replies


100+
P: 178
sorry just to be a little clearer.

Error:
Line: 116
Char: 3
error: 'dragobj.newObject' is null or not an object
code:0
Jul 9 '08 #2

acoder
Expert Mod 15k+
P: 16,027
"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.
Jul 9 '08 #3

100+
P: 178
yeah I have already tried that. I think the problem lies in the createObject function. Seems to be a problem assigning the onmousedown event.
Jul 9 '08 #4

acoder
Expert Mod 15k+
P: 16,027
Yeah, that should be:
Expand|Select|Wrap|Line Numbers
  1. newObject.onmousedown=function(){grab(this);}
Jul 9 '08 #5

100+
P: 178
Yeah, that should be:
Expand|Select|Wrap|Line Numbers
  1. newObject.onmousedown=function(){grab(this);}
Has anyone every told you you're some pup! :)

Thanks... you don't know how much that has helped
Jul 9 '08 #6

acoder
Expert Mod 15k+
P: 16,027
Glad I could help :)
Jul 9 '08 #7

Post your reply

Sign in to post your reply or Sign up for a free account.