anonimizzato
06-10-2007, 16:15
Ciao a tutti,
studiando Javascript stavo cercando di realizzare un "semplice" script che consenta il dragging di un elemento posizionato.
Riesco correttamente a fare seguire l'elemento rispetto alla coordinate del mouse sulla pagina ma non riesco a fare in modo che al mousedown l'elemento si "ancori" nel suo vertice 0,0 al puntatore del mouse.
Io vorrei, come giusto che sia, che l'elemento rimanga fissato al mouse rispetto al punto in cui si trova il puntatore all'interno dell'elemento stesso.
Il codice (da provare con Firefox) č qui sotto:
La parte in grassetto č laddove vorrei che lo script calcolasse lo spostamento da eseguire meno le coordinate interne del punto di click.
Cosė com'č il dragging rimane infatti bloccato
mentre se metto solo:
X = mousex;
Y = mousey;
allora funziona ma con l'effetto indesiderato di cui prima.
Dove sbaglio?
Grazie mille.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="revisit-after" content="7 days" />
<meta http-equiv="robots" content="index,follow" />
<meta http-equiv="Cache-Control" content="cache, must-revalidate" />
<meta http-equiv="pragma" content="cache" />
<link rel="stylesheet" type="text/css" href="css/stile.css" />
<title>Localhost</title>
</head>
<body onmousemove="drag(event)">
<div id="pippo" onmousedown="startDrag(event)" onmouseup="stopDrag(event)" style="position:absolute; top:70px; left:50px; width:100px; height:70px; background:gray">
</div>
<div id="cords" style="position:absolute; top:0px; right:0px"></div>
<script type="text/javascript">
// inizializzazione variabili
var draggable = 0;
var mousex = 0;
var mousey = 0;
var elemX = 0;
var elemY = 0;
var innerX = 0;
var innerY = 0;
var X = 0;
var Y = 0;
var pippo = document.getElementById('pippo');
var cords = document.getElementById('cords');
function calcola(evt) {
e = evt;
// posizione dell'elemento
elemX = parseInt(pippo.style.left);
elemY = parseInt(pippo.style.top);
// posizione del mouse sullo schermo
mousex = e.clientX;
mousey = e.clientY;
// posizione del mouse rispetto al vertice sx dell'elemento
innerX = mousex - elemX;
innerY = mousey - elemY;
X = mousex - innerX;
Y = mousey - innerY;
}
// attiva il flag di trascinamento
function startDrag(evt) {
draggable = 1;
}
// disattiva il flag di trascinamento
function stopDrag(evt) {
draggable = 0;
}
// trascinamento
function drag(evt) {
calcola(evt);
//e = evt;
if (draggable == 1) {
pippo.style.left = X + 'px';
pippo.style.top = Y + 'px';
cords.innerHTML = 'x=' + X;
cords.innerHTML += ' y=' + Y;
}
}
</script>
</body>
</html>
studiando Javascript stavo cercando di realizzare un "semplice" script che consenta il dragging di un elemento posizionato.
Riesco correttamente a fare seguire l'elemento rispetto alla coordinate del mouse sulla pagina ma non riesco a fare in modo che al mousedown l'elemento si "ancori" nel suo vertice 0,0 al puntatore del mouse.
Io vorrei, come giusto che sia, che l'elemento rimanga fissato al mouse rispetto al punto in cui si trova il puntatore all'interno dell'elemento stesso.
Il codice (da provare con Firefox) č qui sotto:
La parte in grassetto č laddove vorrei che lo script calcolasse lo spostamento da eseguire meno le coordinate interne del punto di click.
Cosė com'č il dragging rimane infatti bloccato
mentre se metto solo:
X = mousex;
Y = mousey;
allora funziona ma con l'effetto indesiderato di cui prima.
Dove sbaglio?
Grazie mille.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="revisit-after" content="7 days" />
<meta http-equiv="robots" content="index,follow" />
<meta http-equiv="Cache-Control" content="cache, must-revalidate" />
<meta http-equiv="pragma" content="cache" />
<link rel="stylesheet" type="text/css" href="css/stile.css" />
<title>Localhost</title>
</head>
<body onmousemove="drag(event)">
<div id="pippo" onmousedown="startDrag(event)" onmouseup="stopDrag(event)" style="position:absolute; top:70px; left:50px; width:100px; height:70px; background:gray">
</div>
<div id="cords" style="position:absolute; top:0px; right:0px"></div>
<script type="text/javascript">
// inizializzazione variabili
var draggable = 0;
var mousex = 0;
var mousey = 0;
var elemX = 0;
var elemY = 0;
var innerX = 0;
var innerY = 0;
var X = 0;
var Y = 0;
var pippo = document.getElementById('pippo');
var cords = document.getElementById('cords');
function calcola(evt) {
e = evt;
// posizione dell'elemento
elemX = parseInt(pippo.style.left);
elemY = parseInt(pippo.style.top);
// posizione del mouse sullo schermo
mousex = e.clientX;
mousey = e.clientY;
// posizione del mouse rispetto al vertice sx dell'elemento
innerX = mousex - elemX;
innerY = mousey - elemY;
X = mousex - innerX;
Y = mousey - innerY;
}
// attiva il flag di trascinamento
function startDrag(evt) {
draggable = 1;
}
// disattiva il flag di trascinamento
function stopDrag(evt) {
draggable = 0;
}
// trascinamento
function drag(evt) {
calcola(evt);
//e = evt;
if (draggable == 1) {
pippo.style.left = X + 'px';
pippo.style.top = Y + 'px';
cords.innerHTML = 'x=' + X;
cords.innerHTML += ' y=' + Y;
}
}
</script>
</body>
</html>