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
