E infatti vi ho ritrovato il codice per realizzare il drag-drop.
Facciamolo con la sintassi buona per Firefox.
Prendo un DIV e lo rendo quadrato, colorandolo in modo diverso dallo sfondo.
<html>
<head>
<style>
#oggetto{
background-color:green;
height:100px;
width:100px;
}
</style>
<script>
</script>
<body>
<div id="oggetto"></div>
</body>
</html>
Ecco il risultato:
Bene.
Ora rendo la posizione assoluta...
<html>
<head>
<style>
#oggetto{
position:absolute;
background-color:green;
height:100px;
width:100px;
}
</style>
<script>
</script>
<body>
<div id="oggetto"></div>
</body>
</html>
E adesso ottengo la posizione, salvandola in variabili.Iniziamo con il solo asse delle X.
Per prima cosa, definisco una variabile che contiene l'oggetto bersaglio degli eventi, quindi creo le routines degli eventi.
<script>
var dragElement;
function OnMouseDown(event){
alert(event.target.style.left);
}
document.onmousedown=OnMouseDown;
</script>
La casella di dialogo non mi restituisce assolutamente nulla.Forse devo estrarne il numero mediante la funzione ExtractNumber. Come la creo?
Ma un momento... ricordo che le impostazioni di posizione date tramite il CSS non appaiono quando rilevate tramite il JavaScript...
Ecco: ho ricostruito il programma, con qualche ritocco, ossia la capacità di leggere in JavaScript le impostazioni fornite con il CSS mediante ComputedStyle.
<html>
<head>
<style>
#oggetto{
position:absolute;
left:100px;
background-color:green;
height:100px;
width:100px;
}
</style>
<script>
var dragElement;
var OffsetX;
var OffsetY;
var StartX;
var StartY;
function Sinistra(oggetto){
var risultato=parseInt(getComputedStyle(oggetto).left);
return isNaN(risultato)==true? null: risultato;
}
function Alto(oggetto){
var risultato=parseInt(getComputedStyle(oggetto).top);
return isNaN(risultato)==true? null: risultato;
}
function OnMouseDown(e){
dragElement=e.target;
OffsetX=Sinistra(dragElement);
OffsetY=Alto(dragElement);
StartX=e.clientX;
StartY=e.clientY;
document.onmousemove=OnMouseMove;
}
function OnMouseMove(e){
dragElement.style.left=OffsetX+e.clientX-StartX;
dragElement.style.top=OffsetY+e.clientY-StartY;
}
function OnMouseUp(){
document.onmousemove=null;
}
document.onmousedown=OnMouseDown;
document.onmouseup=OnMouseUp;
</script>
<body>
<div id="oggetto"></div>
</body>
</html>
E funziona!!!
Incollando su Blocco Note questo codice, e salvando con un'estensione .HTML, col browser Firefox, funziona! Con Internet Explorer sicuramente non funziona, mentre con altri non lo so.
Nessun commento:
Posta un commento