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
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
HTML:
<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>
Ultima modifica di un moderatore: