Crea elementi sul tuo sito trascinabili con Draggabilly.js

Ci sono un sacco di tutorial là fuori su come rendere le cose trascinabili in una pagina web . jQuery è uno dei modi più semplici. Non hai nemmeno bisogno dell'interfaccia utente di jQuery, solo un piccolo aiuto dalla funzione di direzione del mouse e forse qualche trattamento opzionale. Ma cosa succede se non vuoi toccare alcun codice jQuery ma vuoi ancora rendere le cose trascinabili? Quindi, draggabilly.js è lo strumento giusto per te.

Con Draggabilly.js, puoi rendere trascinabile qualsiasi elemento di una pagina web. È possibile personalizzare il comportamento dell'elemento trascinabile come aggiungere il movimento della griglia, legare gli ascoltatori degli eventi agli eventi, limitare i movimenti solo all'asse X o Y e molto altro. Supporta anche vari browser, IE8 + e persino i browser mobili multi-touch.

Iniziare

Per iniziare, devi solo includere la fonte Draggabilly.js sul tuo sito. Non c'è bisogno di altre dipendenze. Puoi prendere il file da GitHub.

Per il resto, lavorerai con alcune funzioni javascript come di seguito.

Trascinamento di base

È necessario includere il seguente snippet nella pagina in modo che il trascinamento possa funzionare.

 var elem = document.querySelector ('# idHere'); var draggie = new Draggabilly (elem, {// options ...}); 

Il #idHere è l'id che dovresti inserire all'interno dell'elemento HTML che vuoi rendere trascinabile. Mentre nella variabile draggie, puoi inserire un'opzione se lo desideri. Se non hai bisogno di avere quell'opzione, puoi anche definire l'id dalla variabile elem .

Ad esempio, se ho un id di #demo senza alcuna opzione, posso scrivere lo snippet in questo modo:

 var elem = document.querySelector ('# demo'); var draggie = new Draggabilly ('# demo'); 

Quindi, all'interno dell'HTML, chiama l'id dell'elemento che desideri girare trascinabile. Il seguente è un esempio di base.

 Trascinami 

Ci sono molti altri modi per influenzare il comportamento di Draggabilly. Puoi limitare il trascinamento per essere solo nell'asse 'y' o 'x' in questo modo:

 nuovo Draggabilly ('#demo', {axis: 'x'}); 

Oppure puoi aggiungere un'opzione di gestione, che specificherà l'elemento di partenza dell'interazione di trascinamento in questo modo:

 var elem = document.querySelector ('# demo'); nuovo Draggabilly (elem, {handle: '.handle'}); 

Questa opzione .handle è utile quando tutti gli elementi interni come input e form non devono essere trascinati. Ci sono ancora molte altre opzioni che puoi aggiungere come contenimento, griglie, metodi ed eventi. Vai alla homepage ufficiale di dragabbilly per vedere la documentazione completa.

Pensiero finale

La funzione di trascinamento, nella maggior parte dei casi, ha scarso effetto sul web design ma è ancora piuttosto importante. Si svolge più spesso nelle app o nei giochi Web. La semplicità della sua installazione e la varietà di diversi metodi di trascinamento rendono questo strumento davvero utile da provare.

10 Miti comuni della tecnologia, smascherati

Essendo un appassionato di tecnologia, di solito sono la prima persona a cui i miei amici e familiari ricorrono per le loro domande e problemi relativi alla tecnologia. E spesso molto, mi dicono fatti non corretti sulla tecnologia che mi fa letteralmente dispiacere per loro.La tecnologia dovrebbe essere semplificata e alcuni miti non dovrebbero impedire a nessuno di sfruttare appieno i propri dispositivi

(Consigli tecnici e di design)

10+ plugin gratuiti di Photoshop per i web designer

L'uso delle estensioni di Photoshop aumenta notevolmente la sua capacità di aiutarti a progettare, ottimizzare il tuo flusso di lavoro e renderti più produttivo. Puoi utilizzare un plug-in Photoshop per velocizzare attività ripetitive o noiose come:genera lunghe ombreesportare i livelli di Photoshopconvertire PSD in CSS3convertire il testo Photoshop in SVGcostruire specifiche di progettazione in Photoshopconvertire il design skeuomorphic in design piattoCi sono molte altre estensioni di Photoshop in giro e in questo elenco ci sono 12 fantastici elementi che ti aiutano a gestire livelli, col

(Consigli tecnici e di design)