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:
Vediamo come scegliere un buon Programmatore Web che sappia offrire supporto e Consulenza per Creare un Sito Web
Ottimizzare i Contatti ricevuti dal Proprio Sito, per vendere i propri Servizi è possibile. ecco alcuni consigli per un Programmatore PHP o Gestore di un Sito.
Core Plus è un CMS a Misura di utente, completamente integrabile ad ogni grafica, che consente lo Sviluppo di Siti Internet Dinamici frutto della mia esperienza di Programmatore PHP Freelance
In questo semplice esempio, mostrerò i fondamenti del linguaggio AJAX utili a comprenderne i costrutti e ad avvicinarsi al suo utilizzo.
Realizzazione di una funzione in PHP che valuta lo Status di risposta di un server ad un client, per verificare la risposta di una determinata URL


buzzoole code
Leggi altro:
Estrarre Stringhe comprese tra due Caratteri con PHP ed Espressioni Regolari.

Come anticipato in alcuni Precedenti Articoli (Estrarre Immagini da un Post Utilizzando PHP e Aggiungere un Attributo ad un link...

Chiudi