Errore DRAG

[z.cristiano]

Ciao, un problema...
Il codice che ho preso, su CHROME, FIREFOX e SAFARI funziona perfettamente mentre su Internet Explorer, quando trascino il box e all'improvviso appare l'errore javascript scritto

"Impossibile impostare il valore della proprietà 'innerHTML': oggetto nullo o non definito"

riferito a quei codici

document.getElementById('sx'+ elem).innerHTML = dragElement.style.left;

document.getElementById('dx'+ elem).innerHTML = dragElement.style.top;

Perchè?
Ho notato aggiungendo ALERT(ELEMN) che quando trascino appare 1 e dopo, trascinando così a caso, appare vuoto...lo rimetto il codice




<style type="text/css">

.drag {
position: relative;
cursor: move;
}

</style>
<div id="interno" style="width:500px;">
<div class="drag" id="1">Prova BOX 1 - <span id="sx1"></span> / <span id="dx1"></span></div>
<div class="drag" id="2">Prova BOX 2 - <span id="sx2"></span> / <span id="dx2"></span></div>
<pre id="debug"> </pre>
</div>
<script language="JavaScript" type="text/javascript">

function $(id)
{

return document.getElementById(id);

}

var _startX = 0; // mouse starting positions

var _startY = 0;

var _offsetX = 0; // current element offset

var _offsetY = 0;

var _dragElement; // needs to be passed from OnMouseDown to OnMouseMove

var _oldZIndex = 0; // we temporarily increase the z-index during drag

var _debug = $('debug'); // makes life easier

InitDragDrop();


function InitDragDrop()
{

document.onmousedown = OnMouseDown;

document.onmouseup = OnMouseUp;

}

function OnMouseDown(e)
{

if(e == null)

e = window.event;

var target = e.target != null ? e.target : e.srcElement;

_debug.innerHTML = target.className == 'drag'

? 'draggable element clicked'

: 'NON-draggable element clicked';


if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag')
{

_startX = e.clientX;

_startY = e.clientY;

_offsetX = ExtractNumber(target.style.left);

_offsetY = ExtractNumber(target.style.top);

_oldZIndex = target.style.zIndex;

target.style.zIndex = 10000;

_dragElement = target;

document.onmousemove = OnMouseMove;

document.body.focus();

document.onselectstart = function () { return false; };

target.ondragstart = function() { return false; };

return false;

}

}



function ExtractNumber(value)
{

var n = parseInt(value);

return n == null || isNaN(n) ? 0 : n;

}



function OnMouseMove(e)
{

if(e == null)

var e = window.event;

var target = e.target != null ? e.target: e.srcElement;

var elem = target.getAttribute("id");

_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';

_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';

document.getElementById('sx'+ elem).innerText = _dragElement.style.left;

document.getElementById('dx'+ elem).innerText = _dragElement.style.top;

_debug.innerHTML = 'MISURE = ' + _dragElement.style.left + ', ' + _dragElement.style.top + ' - '+ elem;

}



function OnMouseUp(e)
{

if(_dragElement != null)
{

_dragElement.style.zIndex = _oldZIndex;

document.onmousemove = null;

document.onselectstart = null;

_dragElement.ondragstart = null;

_dragElement = null;

_debug.innerHTML = 'MISURE = ';

}

}

</script>

grazie
C