Ogni Drag DIV ha le sue dimensioni

[z.cristiano]

Ciao a tutti

Ho fatto il drag con DIV e unica cosa che non ci riesco è che in questa pagina
http://www.graficalesta.it/1.html

Ci sono due DIV per cui, come si fa a vedere che ogni DIV ha le sue dimensioni?

Cioè, in questa pagina se lo sposti PROVA BOX 1, sul testo MISURE fa vedere le misure pixel tra LEFT e TOP e poi, clicco PROVA BOX 2, lo sposto e su MISURE cambia per PROVA BOX 2 ripartendo da 0

Quello che vorrei fare è:
Se clicco PROVA BOX 1, lo sposto e lo fermo in un posto fa vedere e rimane le sue misure visibili all'interno di PROVA BOX 1 e infine, clicco PROVA BOX 2, lo sposto e lo fermo in un posto fa vedere e rimane le sue misure visibili all'interno di PROVA BOX 2

Come si fa?
Ecco il codice

<style type="text/css">

.drag {border: 1px solid black; background-color: rgb(240, 240, 240); position: relative; padding: 0.5em; margin: 0 0 0.5em 1.5em; cursor: move;}

th, td {text-align: left; padding-right: 1em;}

table {margin: 0 0 0.4em 1.3em; border: 1px solid rgb(240, 240, 240);}

</style>

<div class="drag">Prova BOX 1 - <span id="sx"></span> / <span id="dx"></span></div>

<div class="drag">Prova BOX 2 - <span id="sx"></span> / <span id="dx"></span></div>

<pre id="debug"> </pre>


<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; 

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

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

document.getElementById('sx').innerHTML = _dragElement.style.left;

document.getElementById('dx').innerHTML = _dragElement.style.top;

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

}


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>
</body>
</html>

 

[borgo italia]

ciao
racchiudi sempre il codice tra gli appositi tag (barra formattazione post 2° riga ultime tre iconcine)
e non mettere troppi ritorni a capo, fai un "rotolone"

 

[z.cristiano]

Ok, una domanda...

Quando clicco e trascino uno dei questi due box, posso trascinare in tutto lo schermo, del browser, come si fa o com'è il codice che se creassi il box chiuso di 500x500 pixel e posso trascinare in tutto solo all'interno del box di 500x500?

Come si fa?