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.

Crea un effetto Reveal immagine solo CSS con bordi trasparenti

Un effetto di rivelazione di immagini solo CSS può essere risolto in diversi modi. In realtà è abbastanza facile codificare un disegno in cui l' immagine risalta (è straripato) con il suo solido sfondo: si limita a posizionare un'immagine su un elemento più piccolo con uno sfondo solido.È po

(Consigli tecnici e di design)

Va bene essere un grande successo. Ecco perché.

"Impostore!" Si potrebbe pensare che la parola dannata appartenga solo a TV, film e altri media di intrattenimento, pronunciata in risposta alla rivelazione che un personaggio non è chi dichiara di essere. Ti sbaglieresti.In effetti, il 70 percento di noi lo sente ogni giorno - dalle nostre stesse menti.

(Consigli tecnici e di design)