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:
Vuoi utilizzare realizzare uno script PHP che possa contare le condivisioni di una pagina web su Google Plus? Ecco un semplice script da utilizzare.
Realizzare un Sito Web con un Design Responsive, vuol dire realizzare un prodotto compatibile con le diverse tipologie di soluzioni Mobile e quindi merita la giusta importanza tra i Web Developer
La rete mette a disposizione di Programmatori e utenti un sempre più completa disponibilità di CMS Open Source. Ma quando conviene sceglierli per il proprio progetto web?
Perchè scegliere PHP per il proprio Progetto Web
Il codice Javascript che potete utilizzare per interrogare le API di Facebook e ottenere le reactions relative da trasmettere Live su Facebook


buzzoole code
Leggi altro:
Creare e Inserire Grafici in una Pagina Web con PHP

Sempre più spesso come Programmatore PHP, realizzando un sito internet, un'applicazione web o un gestionale online trovo necessaria e importante...

Chiudi