Draggable [sw-drag]
Elementos arrastáveis com suporte a touch, restrição de eixo, limites de container ou janela, e alça (handle) personalizada.
1. Demo — Arraste os cards
Adicione sw-drag em qualquer elemento. Funciona com mouse e touch. O elemento recebe position: absolute automaticamente se não possuir posicionamento.
Livre
Arraste em qualquer direção
Só horizontal
sw-drag-axis="x"
Só vertical
sw-drag-axis="y"
Limitado
sw-drag-bounds="parent"
2. Handle de Arrastar — sw-drag-handle
Com sw-drag-handle apenas o elemento indicado inicia o drag — o restante do card permanece clicável normalmente.
Conteúdo do card
Esta área não inicia o drag. Botões, inputs e links dentro do card continuam funcionando normalmente.
3. Limites — sw-drag-bounds
Dois valores disponíveis: parent limita ao elemento pai imediato e window limita à janela do navegador.
4. Eventos
Três eventos são emitidos no elemento: ao iniciar o arraste, durante o movimento (a cada frame) e ao soltar.
Referência de Atributos
| Atributo / Evento | Padrão | Descrição |
|---|---|---|
sw-drag (ou y2drag) |
— | Ativa o arraste no elemento (suporta mouse e touch) |
sw-drag-axis |
both |
Restringe o eixo: x, y ou both |
sw-drag-bounds |
— | parent limita ao elemento pai, window limita à janela |
sw-drag-handle |
— | Seletor CSS do handle — apenas este elemento inicia o drag |
sw:drag:start |
— | Emitido ao iniciar o arraste |
sw:drag:move |
— | Emitido a cada frame com coordenadas — e.detail.x e e.detail.y |
sw:drag:end |
— | Emitido ao soltar o elemento |