fb
Schedule a Meeting

Draggable By Shopify – Nuovo miglior strumento di sviluppo Shopify per gli sviluppatori

This post is also available in: English (Inglese) Deutsch (Tedesco) Français (Francese)

Che cos’è Draggable?

Come tutti siamo consapevoli che Shopify è in continua evoluzione e porta in nuove funzionalità per i suoi utenti di tanto in tanto. Draggable è la nuova edizione nel gattino ed è uno strumento di sviluppo che fornisce una libreria modulare drag and drop che consente agli utenti di iniziare a costruire le funzionalità di cui hanno bisogno. Gli utenti possono iniziare piccolo e continuare ad aggiungere se necessario.

Draggable offre agli utenti funzionalità di trascinamento della selezione, mark-up accessibile, riordino DOM veloce e altre funzionalità per rendere più facile per gli utenti di Shopify. Funziona attraverso la maggior parte dei mezzi di interazione, come Mouse, tocco e tocco di forza, e con il supporto della tastiera accessibile in arrivo.

Con Draggable si può ottenere il controllo completo sul comportamento di trascinamento e rilascio! Una delle funzioni di Draggable è che astrae gli eventi del browser nativi in un’API completa per creare un’esperienza di trascinamento personalizzato.

Draggable include anche moduli aggiuntivi: Sortable, Swappable e Droppable. Trascinabile ma fa il lavoro di sollevamento pesante come la creazione di uno specchio, l’emissione di eventi, la gestione degli eventi del sensore e la creazione di elementi trascinabili.

I moduli aggiuntivi hanno un’interfaccia API simile in quanto sono costruiti sulla parte superiore di Draggable. Alcune delle sue caratteristiche sono:

Caratteristiche di Draggable :

  • Funziona con gli eventi di trascinamento, mouse, tocco e tocco forzati nativi
  • Agganciandosi al ciclo di vita degli eventi trascinabili, può estendere il comportamento di trascinamento
  • Estendere il rilevamento del trascinamento aggiungendo sensori
  • La libreria è destinata prima ES6
  • Visibilità immediata delle tue azioni e dei loro risultati

Swap

Il classico switcheroo permette agli utenti di trascinare un elemento su un altro e guardarli scambiare posti nel DOM. Questa funzionalità è più adatta per quando è necessario mantenere le dimensioni del layout.

Ordinabile

Con questa funzionalità, è ora possibile ordinare i nodi DOM con stile. Trascinare gli elementi di una raccolta da una posizione all’altra e visualizzare tutti gli elementi ancorati in posizione. E ‘veloce e reattivo che non lascerà il vostro portafoglio prestazioni legato per cornici e ti dà esattamente quello che stai cercando.

In collisione

Avvia il tuo percorso di sviluppo del gioco e inietta un po’ di rilevamento delle collisioni. Collidable è una funzionalità che impedisce agli elementi trascinabili di sovrappermarsi l’uno all’altro, eliminando gli eventi di collisione quando l’elemento di origine trascinato entra ed esce da una zona con restrizioni.

Alcune delle proprietà e dei vantaggi dello strumento sono:

Accessibile

L’accessibilità Drag & drop è uno strumento delicato ed è molto utile. Mentre i browser continuano a lavorare su una soluzione nativa affidabile, Draggable facilita fornendo tutti gli attributi aria appropriati per essere disponibili nei posti giusti. Inoltre, non è necessario disporre di conoscenze intensive sui codici per utilizzare questo strumento.

Uno dei motivi principali per cui viene creata l’opzione drag and drop è quello di dare un’opportunità a coloro che hanno meno di competenze tecniche in questo campo.

Ampia

Trascinabile è facilmente estendibile. Se è necessario un modulo che non è già disponibile, è possibile scrivere un modulo personalizzato per la funzionalità necessaria e inviarlo al repository GitHub per la revisione. Le probabilità sono che molti altri come te potrebbero richiedere la stessa funzionalità e puoi condividerla con altri.

Animazione

Niente infastidisce lo sviluppatore più che interrompere il loro design personale. Draggable non è un tale strumento per entrare nel modo del tocco personale di un designer e rubare lo spettacolo costringendo qualsiasi stili di animazione indisciplinati. Si può semplicemente prendere la vostra scelta da una porzione di selettori CSS e lo stile al desiderio del vostro cuore. Puoi progettare il tuo sito web in base alle tue esigenze.

Dove prenderlo?

Lo strumento è ancora nella sua versione beta e può essere installato tramite npm.

npm installare @Shopify/trascinabile –save

o tramite filato:

filato aggiungere @Shopify/trascinabile

Per ulteriore documentazione, è possibile fare riferimento ai seguenti collegamenti per ogni modulo all’interno delle rispettive directory.

Per ulteriori consultazioni e necessità di sviluppo per il tuo negozio Shopify, puoi contattare WebBee Global. I team di sviluppo di WebBee hanno una vasta conoscenza della piattaforma Shopify e possono guidarti nella giusta direzione verso l’uso delle sue funzionalità.

Scroll to top
Schedule a Meeting
close slider