Errore DRAG DIV

[z.cristiano]

Ciao, un problema...
Il codice che ho fatto, 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, ritrascinando così a caso, appare vuoto...
Ecco 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
Cristiano

 

[criric]

Ciao,
gli errori ci sono anche sugli altri browser ma probabilmente li hai abilitati solo su IE

cmq se commenti quelle due righe che danno errore lo script funziona ugualmente senza errori

Ricordati di formattare il codice che posti