Vuoi rendere un oggetti HTML come un div, un titolo, un’immagine o un testo spostabile e muoverlo in maniera libera nella tua pagina internet? Cerchi lo script JS per fare questa procedura facilmente?
Di seguito, in questa guida imparerai ad integrare un script JS all’interno della tua pagina HTML con una funzione molto particolare. Parlo della possibilità di muovere liberamente gli oggetti interessati, presenti all’interno della pagina grazie ad un singolo click del mouse e al sua trascinamento.
Questo articolo è parte della raccolta “Funzioni HTML&JS” di BytePost, consulta la lista completa per scoprire ed integrare altre fantastiche funzioni al tuo sito web. Leggi ad esempio: Come bloccare l’uso del tasto destro del mouse.
Prima di iniziare con il codice, è bene specificare che per procedere con la guida non è di fondamentale importanza conoscere il linguaggio di programmazione Javascript, in quanto basterà seguire passo passo la procedura e copiare i codici riportati per far funzionare il tutto.
Consiglio però un minimo di conoscenza di base HTML e CSS, quel poco che basta per l’inserimento dei tag nella propria pagina web.
Segui il nostro corso per principianti di HTML e CSS
Come già detto nel primo paragrafo, la funzione js che andremo a vedere qui di seguito, servirà a rendere gli oggetti (div, textarea, paragrafi, headings, immagini e tutto quello che si desidera) movibili all’interno dell’intera pagina HTML. L’azione viene effettuata al click del mouse e al trascinamento del cursore, così da poter muovere liberamente gli oggetti interessati.
Rispetto alle precedenti guide, lo script per questo funzione è più “corposo“, in quanto è suddiviso in più fasi.
Con un po’ di dimestichezza in javascript potresti anche modificarlo per adattarlo meglio alle tue esigenze
Per motivi tecnici non possiamo fornire un anteprima diretto della funzione in questa pagina, possiamo garantire però il suo funzionamento. Prova a copiare i seguenti codici in un documento .html, salva ed eseguilo in un browser.
Il codice Javascript per muovere/spostare liberamente uno o più oggetti nella pagina HTML del tuo sito è il seguente:
<script>
var cursore;
var offset = [0,0];
var ogg;
var click = false;
ogg = document.getElementById("oggettoMobile");
document.body.appendChild(ogg);
ogg.addEventListener('mousedown', function(e) {
click = true;
offset = [
ogg.offsetLeft - e.clientX,
ogg.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
click = false;
}, true);
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (click) {
cursore = {
x : event.clientX,
y : event.clientY
};
ogg.style.left = (cursore.x + offset[0]) + 'px';
ogg.style.top = (cursore.y + offset[1]) + 'px';
}
}, true);
</script>Per maggiore compatibilità ed evitare di rallentare il caricamento della pagina, incollalo nel footer (parte bassa del documento HTML).
Come puoi vedere dallo script, il suo funzionamento è diviso in più fasi:
Ora non ti resta che inserire l’oggetto o gli oggetti che desideri muovere/spostare dinamicamente all’interno della pagina HTML.
Qui un codice di esempio:
<div id="oggettoMobile" style="background-color:#ad2624; width:100px; height:100px; border-radius:50px; position:relative;"></div>Le regole CSS in questo caso sono fondamentali, perché l’oggetto va configurato in modo che sia accessibile ed abbia gli giusti attributi per il corretto funzionamento dello script.
Da notare i parametri dello stile, in particolar modo l’attributo “position“. In sua assenza l’oggetto non si muoverà.
Puoi usare anche il valore fixed (position:fixed) in modo che resti sempre in vista allo scorrimento della pagina. Fai dei test pratici, usa il nostro editor html online.
Qui un esempio pratico:
Vuoi maggiori informazioni sulla funzione per muovere oggetti in una pagina HTML? Scrivi un commento in basso e ti risponderemo.
Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!
Leggi anche: Come ricaricare una pagina da pulsante
Articoli Recenti: