JS Module

Draggable Y2Drag

Elementos arrastáveis com suporte a touch, restrição de eixo, limites de container ou janela, e handle personalizado.

1. Demo - Arraste os cards

Adicione y2drag em qualquer elemento. Funciona com mouse e touch. O elemento vira position:absolute automaticamente.

Livre

Arraste em qualquer direção

Só horizontal

y2drag-axis="x"

Só vertical

y2drag-axis="y"

Limitado

y2drag-bounds="parent"

2. Handle de Arrastar - y2drag-handle

Com y2drag-handle apenas o elemento indicado inicia o drag - o restante do card permanece clicável normalmente.

Arraste pelo header

Conteúdo do card

Esta área não inicia o drag. Botões, inputs e links dentro do card continuam funcionando normalmente.

3. Limites - y2drag-bounds

Dois valores disponíveis: parent limita ao elemento pai imediato e window limita à janela do navegador.

parent
parent
window
Arraste pela tela toda

4. Eventos

Três eventos são emitidos no elemento: ao iniciar, durante o movimento (a cada frame) e ao soltar.

Arraste-me
Aguardando drag… x: - — y: -

Quick Reference

Atributo / Evento Padrão Descrição
y2drag - Ativa o drag no elemento (mouse + touch)
y2drag-axis both Restringe o eixo: x, y ou both
y2drag-bounds - parent limita ao pai, window limita à janela
y2drag-handle - Seletor CSS do handle - somente esse elemento inicia o drag
yd:y2drag:start - Emitido ao iniciar o drag
yd:y2drag:move - Emitido a cada frame - e.detail.x e e.detail.y
yd:y2drag:end - Emitido ao soltar o elemento