Drag no SWCore — documentação e exemplos

O que é

Módulo de arraste livre do SWCore para criação de janelas flutuantes, widgets de controle, post-its, painéis móveis e interfaces estilo desktop. Suporta definição de alça exclusiva (sw-drag-handle), restrição de movimento aos eixos X ou Y (sw-drag-axis) e trava dentro do elemento pai ou janela (sw-drag-bounds).

Como funciona

Calcula o offset do cursor/toque em tempo real e atualiza as coordenadas left e top via aceleração nativa. Define automaticamente position: absolute se o elemento for estático, aplica elevação automática de z-index trazendo o elemento ativo para a frente e injeta a classe is-dragging com feedback visual instantâneo.

Exemplos

1. Widget / Janela Flutuante Estilo Desktop (Alça no Cabeçalho) Ao vivo

Arraste a janela pela barra de título superior

Monitor de Sistema

Uso da CPU 42% Normal

Memória RAM 1.4 GB / 4.0 GB

<!-- Janela arrastável somente pela barra de título -->
<div sw-drag sw-drag-handle=".drag-win-hdr" sw-drag-bounds="parent" class="janela-flutuante">
  <div class="drag-win-hdr">
    <span>Barra de Título (Alça)</span>
  </div>
  <div class="conteudo">
    <p>Conteúdo da janela...</p>
  </div>
</div>

2. Canvas de Trabalho com Múltiplos Cards Livres (Post-its & Tarefas) Ao vivo

Clique e arraste qualquer card para organizar o quadro

Em Produção

Refatorar SWCore

Sprint da nova versão v0.2

💡 IDEIA

Adicionar suporte nativo a drag & drop em listas Kanban!

Sucesso

+14.8% Vendas

Crescimento mensal ativo

<!-- Múltiplos elementos arrastáveis livres com limites no elemento pai -->
<div class="canvas-relativo" style="position:relative; height:400px;">
  <div sw-drag sw-drag-bounds="parent" class="card-1">Card 1</div>
  <div sw-drag sw-drag-bounds="parent" class="card-2">Card 2</div>
  <div sw-drag sw-drag-bounds="parent" class="card-3">Card 3</div>
</div>

3. Restrição por Eixos — Eixo Horizontal (X) e Eixo Vertical (Y) Ao vivo

Eixo Horizontal: sw-drag-axis="x"

O elemento só se move para a esquerda e direita

Arraste X

Eixo Vertical: sw-drag-axis="y"

O elemento só se move para cima e para baixo

Arraste Y

<!-- Arraste travado no eixo Horizontal -->
<div style="position:relative; height:60px;">
  <div sw-drag sw-drag-axis="x" sw-drag-bounds="parent" class="slider-handle">Arraste X</div>
</div>

<!-- Arraste travado no eixo Vertical -->
<div style="position:relative; height:150px;">
  <div sw-drag sw-drag-axis="y" sw-drag-bounds="parent" class="elevador-handle">Arraste Y</div>
</div>

Atributos

sw-drag

ativa o comportamento arrastável no elemento

sw-drag-handle=".seletor"

define um filho específico (ex.: barra de título ou ícone) como a única alça que inicia o arraste

sw-drag-bounds="parent"

impede que o elemento ultrapasse as bordas do seu contêiner pai

sw-drag-bounds="window"

impede que o elemento ultrapasse os limites da tela do navegador

sw-drag-axis="x"

restringe o movimento exclusivamente ao eixo horizontal

sw-drag-axis="y"

restringe o movimento exclusivamente ao eixo vertical

Variantes

Nenhum.

Eventos

sw:drag:start

disparado no início do arraste

sw:drag:move

disparado durante o movimento com coordenadas { x, y }

sw:drag:end

disparado ao soltar o elemento

API (JavaScript)