Programmatore PHP esperto nella realizzazione di Applicazioni Web | Siti Internet | Portali Dinamici | Consulenza Web | Realizzazione di Interfaccie dinamiche utilizzando Javascript

Realizzare un Drag e Drop con Javascript



Le Applicazioni Web di un Programmatore PHP diventano sempre più particolari e interattive ecco perché saper realizzare un Drag e Drop con Javascript potrebbe risultare utile per lo Sviluppo Web e necessario per interfacce UserFriendly.

In questo articolo infatti realizzeremo in maniera semplice un div che può essere trascinato lungo tutto il monitor e rilasciato fino a mantenere la posizione desiderata.

Per la realizzazione di questo Script un Programmatore PHP dovrà avere a mente solo i concetti di HTML/CSS e Javascript, e poi utilizzare quest’esempio come idea per la realizzazione di Script che consentono di ordinare le interfacce grafiche secondo il gradimento dell’utente, o per infinite altre applicazioni.

Per prima cosa, andremo ad esaminare il codice Javascript presente nella pagina:

<script type="text/javascript">

//Inizializzo l'oggetto da Spostare
oggetto = null;

//Le due variabili che archiviano la posizione cursore mouse
mouse_x = 0;
mouse_y = 0;

//Le due variabili che archiviano la posizione dell'elemento
ele_x = 0;
ele_y = 0;

//Collega le due funzioni muovi e ferma
function inizializzaMov(){
document.onmousemove = muovi;
document.onmouseup = ferma;
}

//Distrugge l'oggetto quando siamo fermi
function ferma(){
oggetto = null;
}

//Funzione principale, che è responsabile dello spostamento dell'elemento
function muovi(e){
mouse_x = document.all ? window.event.clientX : e.pageX;
mouse_y = document.all ? window.event.clientY : e.pageY;
if(oggetto != null)
{
oggetto.style.left = (mouse_x - ele_x) + "px";
oggetto.style.top = (mouse_y - ele_y) + "px";
}
}

//Viene richiamata quando comincio a spostare l'oggetto
function muoviOggetto(ele){
//memorizzo i valori dell'elemento che deve essere spostato
oggetto = ele;
ele_x = mouse_x - oggetto.offsetLeft;
ele_y = mouse_y - oggetto.offsetTop;

}
</script>

Con questa porzione di codice Javascript il Programmatore PHP potrà gestire i movimenti del div box che andremo a disegnare con CSS in maniera semplice:

#box{
background-color: #FF8C00;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: smaller;
color: Black;
width: 200px;
height: 100px;
cursor: move;
position: relative;
padding: 10px;
}

Infine il codice HTML che richiamerà nel body la funzione che inizializza il movimento e il div trascinabile:

<body onload="inizializzaMov()">
<!-- Posizione Inizilale x e y -->
<div id="box" style="left:50px;top:60px;z-index: 5;" onmousedown="muoviOggetto(this);" >
<center>Clicca e Trascinami</center>
</div>
</body>

Come dico sempre alla fine di ogni mio esempio, lascio al Programmatore PHP o Javascript la possibilità di ampliare e suggerire applicazioni di questo Script, potete vedere l’esempio a questo indirizzo.

PER ULTERIORI INFORMAZIONI:

Daniele Tabacco
Programmatore PHP | Web Developer | Consulente Web e SEO

PHP - MySql - AJAX - HTML5 - JAVASCRIPT - CSS - JSON/XML - JQuery
WebApps, Applicazioni, Realizzazione Siti Mobile per iPhone e Android
Programmatore PHP - Consulente Web Marketing Napoli, Roma, Milano, Firenze.
Tel.+39 329.11.73.918
email: daniele.tabacco[at]gmail.com
skype: daniele.tabacco

Il tuo nome (richiesto)

La tua email (richiesto)

Oggetto

Il tuo messaggio

 


POTREBBE INTERESSARTI ANCHE:
Un semplice Script PHP per ripristinare il contatore delle condivisione Facebook, tramite la creazione di una semplicissima APP Facebook.
Script PHP per leggere con le Google Weather API un file XML che genera delle previsioni meteo per il tuo sito internet
Vuoi condividere i commenti Facebook sul tuo sito? utilizza questo semplice Plugin realizzato in PHP/JQuery da Daniele Tabacco Programmatore PHP, Consulente WEB
Vuoi redere il tuo sito ancora più Social e vuoi che sia presente su Facebook? Grazie alle Open Graph anche chi non è Programmatore PHP potrà integrare il proprio sito nel network Facebook
Programmazione HTML5, un piccolo esempio sulla funzionalità di Geolocalizzazione


buzzoole code
Leggi altro:
Consulenza Web Marketing? No, Viaggio ad Amsterdam

Dato la necessità di staccare un po ad Agosto, quest’anno per ricaricare le batterie mi sono concesso un breve viaggio culturale...

Chiudi