[SOLVED] The help of a javascript genius is required

cleary1981 · July 9, 2008

Hi,

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"

Error:

Line: 116

Char: 3

error: 'dragobj.newObject' is null or not an object

code:0

heres the 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  ###########line 116#################
  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 · July 9, 2008

got the help of a genius from another source as there doesnt seem to be anyone helping in this forum.

The solution was as follows for anyone intersted.

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

Sign In

[SOLVED] The help of a javascript genius is required

Recommended Posts

cleary1981

Link to comment

Share on other sites

cleary1981

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information