Elemento arrastável livre ou travado num eixo, com limite dentro do pai.
O que é
Torna qualquer elemento arrastável pelo mouse/toque — livre pela tela, só num eixo, ou preso dentro do contêiner pai.
Como funciona
Implementação própria com pointer events — funciona igual no mouse e no toque, e não depende do GSAP Draggable (que é plugin pago). Ele escreve a posição direto no left/top do elemento, então o elemento precisa estar posicionado (absolute, fixed ou relative) pra sair do lugar.
Exemplos
Preso dentro do pai Ao vivo
arraste-me — não saio desta caixa
<div class="rel" style="height:30rem">
<div sw-drag sw-drag-bounds="parent" class="abs" style="top:1rem;left:1rem">
arraste-me
</div>
</div>
<!-- o PAI precisa ser .rel e o arrastável .abs -->
Travado num eixo só Ao vivo
só na horizontal ↔
só na vertical ↕
<div sw-drag sw-drag-axis="x" sw-drag-bounds="parent">só na horizontal</div>
<div sw-drag sw-drag-axis="y" sw-drag-bounds="parent">só na vertical</div>
Com alça — só o punho arrasta Ao vivo
⠿ arraste por aqui
Este texto dá pra selecionar normalmente, porque só a barra de cima é a alça.
<div sw-drag sw-drag-handle=".pega" sw-drag-bounds="parent">
<div class="pega">⠿ arraste por aqui</div>
<div>conteúdo que continua selecionável</div>
</div>
<!-- é o padrão de "janelinha" com barra de título -->
Livre e preso à janela Ao vivo
livre — sem limite
preso à janela
<!-- sem limite nenhum -->
<div sw-drag style="position:relative">arrasta livre</div>
<!-- não sai da janela do navegador -->
<div sw-drag sw-drag-bounds="window" style="position:relative">preso à janela</div>
Atributos
sw-drag
liga o arrasto (sem valor)
sw-drag-handle
seletor da "alça" — só arrasta clicando nela, não no elemento inteiro
sw-drag-axis
x \| y — trava o movimento num eixo só
sw-drag-bounds
parent \| window — até onde ele pode ir
Variantes
(sem bounds)
arrasta livre, sem limite nenhum
sw-drag-bounds="parent"
não passa das bordas do elemento pai
sw-drag-bounds="window"
não sai da janela do navegador
sw-drag-axis="x"
só na horizontal
sw-drag-axis="y"
só na vertical
sw-drag-handle=".pega"
só a alça arrasta — o resto do elemento continua clicável/selecionável
Eventos
Nenhum.
API (JavaScript)
Nenhum.
Requisitos
Nenhuma.
Limitações — o que ele não faz
Ele move o elemento escrevendo left/top — um elemento static (o padrão do CSS) não sai do lugar. Use .abs, .rel ou .fix.
A posição não é guardada: ao recarregar, tudo volta pro lugar original. Se precisar lembrar, salve você mesmo no localStorage.
Isto é arrastar posição livre — não é reordenar lista (drag-and-drop com soltar em alvo), que é outro problema.
