Ogni Drag DIV ha le sue dimensioni

z.cristiano

Utente Attivo
16 Giu 2007
145
0
16
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


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:

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
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

Utente Attivo
16 Giu 2007
145
0
16
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?
 
Discussioni simili
Autore Titolo Forum Risposte Data
G notifiche dekstop/mobile ogni volta che record è inserito/eliminato/aggiornato PHP 0
D Modem Asus non trasmette ogni 3/4 giorni Reti LAN e Wireless 3
A aggiungere stringa all'inizio di ogni riga di un file txt PHP 3
D un pulsante salva per ogni ID jQuery 10
S Inserire foto in ogni cella di una tabella Javascript 0
C ID che si incrementa ad ogni evento Database 0
Z Conteggi BOX per ogni 5 righe PHP 1
S [Vendo]Facebook&Instagram per ogni uso! Social Media Marketing 0
T Campi static del Controller generico si azzerano ad ogni richiesta PHP 3
L un punto ogni tot. speso PHP 0
ges Microsoft ACCESS oltre ogni limite (tre manuali) Altri Annunci 2
LDB Multimedia e Internet Realizzo e Progetto Siti Web per ogni tipologia Professionale Offerte e Richieste di Lavoro e/o Collaborazione 0
T PHP: variabile che cambia ogni 5 giorni... PHP 3
R [WordPress] Calendario Personale per ogni Utente WordPress 0
KOMODO_JOE [WordPress] Area privata per ogni utente su altervista WordPress 1
G [PHP] totale per ogni id di un ciclo PHP 1
maxnegri Eseguire un'azione con php ad ogni condivisione su Facebook PHP 0
R [PHP] creare pagina profilo per ogni utente PHP 4
M [MySQL] Come associare stats ad ogni utente. MySQL 0
K [COMPRO] Pagine e account su facebook di ogni dimensione Annunci servizi di Social Media Marketing 3
syndr0m3 [PHP] Rinominare file sul server ogni tot minuti PHP 8
W Vendo Visite al sito web ITALIANE a 1 euro ogni 1000 Vendere e Acquistare pubblicita' online 3
M [Javascript] [PHP] aggiornare pagina ogni ora Javascript 2
D [Javascript] [HTML] Countdown su Mobirise di 24 ore relative per ogni utente. Javascript 4
B [WordPress] inserire pulsante like per ogni post WordPress 2
SebaGravi Creare file per ogni news presente nel DB SEO e Posizionamento 2
4potere [WordPress] Plugin raccolta clienti, area dedicata ad ogni cliente WordPress 0
F [HTML] Effetto fade su ogni immagine contenute in uno slider HTML e CSS 16
giancadeejay [PHP] checkbox ad ogni riga estratta dal db PHP 13
I [PHP] download documento pdf per ogni operaio PHP 4
S [CERCO] spazio web per piccolo popup Fb, pago euro 10 ogni 1000 aperture Vendere e Acquistare pubblicita' online 0
adri1234 [VENDO] spam su pagina Facebook da 63.000 fans tutti IT, Il costo di ogni post e' di 1,50 euro. Annunci servizi di Social Media Marketing 0
A Creo e vendo profili Facebook di ogni tipo. Su richiesta. Annunci servizi di Social Media Marketing 0
easypopularity VENDO OGNI TIPO DI SOCIAL Annunci servizi di Social Media Marketing 0
Daniele450 [Javascript] Linkare ogni sigola voce dello stesso menu ad un div diverso della stessa pagina Javascript 3
webmachine [WORDPRESS] OG:IMAGE Facebook per ogni articolo WordPress 12
R [WordPress] Ogni utente la sua home page WordPress 5
S [Javascript] Creare mappa per ogni utente Javascript 5
M Visualizzare da una classe esistente ogni profilo utente PHP 1
L intestazione di tabella HTML continua a ripetere per ogni riga della tabella PHP 5
L Cron Job ogni due ore Apache 0
F Sommare valori di ogni periodo con SELECT PHP 7
S impostare colore sfondo di ogni cella di una datagridview Visual Basic 1
P Connessione MySQL: aprirla ogni volta? PHP 1
Gozer Inserisci nuovo imput di testo a ogni click jQuery 0
MarcoGrazia Funzioni generiche per ogni uso Snippet PHP 0
F nuovo e scarso oltre ogni immaginazione Presentati al Forum 1
L Widget su ogni blog WordPress 2
M Selezionare un risultato ogni 10 da select MySQL 4
P Inserimento <div> ogni 2 articoli in un loop Wordpress WordPress 8

Discussioni simili