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 necessaio per interfaccie 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 interfaccie 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>
//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;
}
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>
<!-- 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.
.Nessun commento Presente.
Tags:
| torna su
Hai letto gli altri articoli?
Come Programmatore PHP sempre più spesso mi viene richiesto di creare le versioni Mobile di portali e siti internet dinamici, dedicate alla navigazione da cellulare e palmari. Senza approfondire le logiche con cui da Programmatore PHP ritengo debbano essere realizzate tali versioni (spero di poter trattare l'argomento in un articolo dedicato) in questa pagina voglio proporre un modo semplice grazie a cui, tramite uno Script Javascipt un Programmatore di siti internet dinamici, possa reindirizzare l'utenza Mobile verso...Leggi Tutto
.png)
In questo articolo presento un interessante piccolo Script Javascript che può essere usato da ogni Programmatore PHP Come base per piccoli CMS o Ecommerce dedicati ad aziende commerciali per la gestione di un carrello elettronico.
Tale script è semplice e intuitivo e permette in tempo reale di aggiornare il costo totale di un ordine in base alla numero di articoli selezionati, un Programmatore PHP o Programmatore Javascript potrà intuitivamente ampliare e completare tale script per renderlo ancora pi&ug...Leggi TuttoIn questo mio nuovo post, è dedicato a quello che personalmente ritego dopo MySQL il patner ideale per un Programmatore PHP, Javascript a differenza di PHP è un linguaggio lato client, cioè interpretato dal browser ad ogni nuova richiesta client (utente o pagina), è può risultare utile per molteplici funzioni di controllo o gestione di una pagina, fino ad arrivare alle interazioni complesse. In questo esempio mostrerò come realizzare uno Script Javascript per una select combinata, c...Leggi Tutto
In questo breve Articolo vi illustrerò come realizzare una Rotazione Banner con JQuery, questo esempio vi consentirà di realizzarlo con un effetto rotazione molto Accattivante utilizzando un Plugin JQuery, e ovviamente come tutti i miei esempi sarà possibile per ogni Programmatore PHP espandere tale esempio in modo da rendere tempi di rotazione o selezione dei Banner del tutto Dinamico.
La Prima cosa che andremo ad esaminare sarà ovviamente il Plugin JQuery, che espandono la già utilissima...Leggi Tutto
Sempre più negli ultimi mesi, Le persone che mi contattano per Realizzare un Sito Internet o un Progetto Web si mostrano apparentemente più smaliziati al punto di nominare più o meno coscientemente il termine JQuery e/o Javascript.
Assisto dunque a conversazioni improbabili dove JQuery viene usato a modi ingrediente, del tipo: "Ne metta un pò qui, un pò qua.... ne metta in modo che si veda". Insomma sembra quasi che il cliente utilizzi un termine/tecnologia semplicemente come se ...Leggi Tutto
Ultimamente leggo sempre più spesso di Articoli o Feedback di persone che utilizzano Groupon, oltre ad analizzare il fenomeno dal punto di vista di Marketing, come Programmatore PHP mi è venuta l'idea di mostrarvi una maniera semplice e pratica per permettere ad un Programmatore JQuery di Conto alla Rovescia in perfetto Stile Groupon.
Per realizzare in maniera semplice un CountDown in stile Groupon con JQuery vi consiglio questa semplice libreria chiamata proprio jQuery Countdown
Con pochissime righe di codic...Leggi Tutto
:
:
:
Vuoi Sviluppare l'Applicazione Mobile (WebApps) del tuo sito o della tua attività? un Applicazione Web, o pianificare la Realizzazione Sito Mobile? Contattami e scegli un Programmatore di WebApps Mobile e Programmatore di Siti Internet Mobile! Sviluppo WebApps per iPhone e Android
- [php] Social Plugin: Integrare Foursquare nel Proprio Sito Internet
- [jS] JQuery e Javascript per lo Sviluppo di Siti Internet: Quando e Come?
- [php] Utilizzare le API Google Maps per la Realizzazione Siti Internet Dinamici
- [consulenza] Perchè Creare una Pagina Facebook per la tua Azienda
- [iPhone] Realizzazione Siti Internet Mobile: Ecco qualche consiglio!
- [consulenza] MiniSito Facebook: Creare una Pagina Facebook efficace e di successo.
- [php] Integrare Twitter nel Proprio Sito
- [iPhone] Realizzazione Siti Internet Mobile, Siti Internet per iPhone e Android
- [php] Inserire i commenti di una Bacheca Facebook sul tuo sito
- [consulenza] Programmatore HTML 5: Semplice Guida alle SessionStorage
- [consulenza] Consulenza Web Marketing? No, Viaggio ad Amsterdam
- [php] ADServer Banner a Rotazione
- [jS] Realizzare CountDown in stile Groupon con JQuery
- [consulenza] Scegliere un Programmatore Freelance
- [php] Inserire il Meteo di Google nel tuo Sito
- [php] Applicazione Flickr per l'Upload di Foto dal tuo Sito
- [consulenza] Integrare una Fotogallery Flickr nel Proprio Sito
- [php] Leggere un file XML usando PHP e le funzioni DOM
- [php] Leggere JSON utilizzando PHP
- [php] Aggiungere il Meteo al tuo sito con Yahoo e PHP
- [consulenza] Programmatore HTML5 e LocalStorage
- [jS] Realizzare un Drag e Drop con Javascript
- [php] Arrotondare una Cifra a 2 decimali Aggiungendo gli Zeri con PHP
- [php] Creare e Inserire Grafici in una Pagina Web con PHP
- [aJax] Realizzare un Form con AJAX e PHP in maniera Semplice
- [aJax] Trasformare un Indirizzo in Coordinate Latitudine e Longitudine con AJAX e Geocoding
- [php] Generare un QRCode con PHP e le API Google Chart
- [consulenza] Interessanti Spunti dalla BTO2010 per gli Sviluppatori Web
- [consulenza] Crea il tuo Gestionale Online o Applicazione Web con PHP e MySQL
- [mySQL] Backup di un Database MySQL utilizzando PHP
Cerchi un Programmatore PHP con esperienza consolidata? Molte aziende a Napoli, Milano, Roma si sono affidate a me. Contattami per una Consulenza Gratuita, per Realizzare un Applicazione Web o Sviluppare Siti Internet, Creare Portali Dinamici, Realizzare Siti su Misura, o come Consulente Web Marketing, Consulente SEO o per la Realizzazione Siti Mobile
