import { Snap } from 'snap-dnd/core';

import { Snap } from 'snap-dnd';

const snap = new Snap(container, {
  onDragStart: (e) => console.log('Started dragging', e.element),
  onDragMove: (e) => console.log('Moving', e.position),
  onDrop: (e) => console.log('Dropped', e.element, 'at index', e.insertionIndex),
});

// Add elements programmatically
snap.addDraggable(myElement, {
  data: { id: 1, type: 'task' },
  axis: 'y'  // Only vertical movement
});

snap.addDropZone(myZone, {
  accepts: ['task'],
  onEnter: () => myZone.classList.add('highlight')
});

// Cleanup when done
snap.destroy();

import { LitElement, html } from 'lit';
import { Snap } from 'snap-dnd';

class TaskBoard extends LitElement {
  snap;

  firstUpdated() {
    this.snap = new Snap(this.shadowRoot, {
      autoRefresh: true,  // Handle Lit re-renders
      onDrop: this.handleDrop.bind(this)
    });
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.snap?.destroy();
  }

  handleDrop(e) {
    // Update your state, Lit will re-render
    this.tasks = reorder(this.tasks, e.insertionIndex);
  }

  render() {
    return html`
      <ul>
        ${this.tasks.map(task => html`
          <li data-draggable data-drag-id=${task.id}>${task.title}</li>
        `)}
      </ul>
    `;
  }
}

import { Snap, Sortable } from 'snap-dnd';

const snap = new Snap(container).use(new Sortable({
  animation: 150,
  ghostClass: 'sortable-ghost',
  placeholderClass: 'sortable-placeholder'
}));

import { Snap, Kanban } from 'snap-dnd';

const snap = new Snap(board).use(new Kanban({
  containers: '.column',
  items: '.card',
  animation: 150
}));

import { Snap, Sortable } from 'snap-dnd';

const snap = new Snap(document.getElementById('board'), {
  onDrop: (e) => {
    const isSection = e.element.classList.contains('section');
    console.log(isSection ? 'Section' : 'Item', 'moved to index:', e.insertionIndex);
  }
}).use(new Sortable());

import { Snap, FileDrop } from 'snap-dnd';

const snap = new Snap(container).use(
  new FileDrop({
    accept: ['image/*', '.pdf'],
    multiple: true,
    maxSize: 10 * 1024 * 1024  // 10MB
  }).onFileDrop((e) => {
    console.log('Files dropped:', e.files);
  })
);

import { createFileDropZone } from 'snap-dnd';

const cleanup = createFileDropZone(element, {
  accept: ['image/*'],
  onDrop: (files) => uploadFiles(files)
});

// Later: cleanup();

import { Snap, AutoScroll, SnapGrid } from 'snap-dnd';

const snap = new Snap(container)
  .addBehavior(new AutoScroll({ threshold: 50, maxSpeed: 20 }))
  .addBehavior(new SnapGrid({ x: 10, y: 10 }));