When I first started working with drag and drop interfaces, I believed HTML5’s native API would meet all my needs. However, I quickly discovered its limitations. The native API lacks touch device support, offers limited customization, and presents accessibility challenges. This led me to explore custom implementations that provide greater control and flexibility.

Creating effective drag and drop interfaces requires balancing user experience, performance, and accessibility. Custom solutions allow developers to overcome the constraints of native implementations while addressing specific project requirements.

Understanding the Limitations of the Native HTML5 Drag and Drop API

The HTML5 drag and drop API provides a standardized approach for implementing drag and drop functionality. However, it comes with significant drawbacks.

First, the native API offers limited control over the drag preview. While browsers automatically generate a preview based on the dragged element, customizing this visual feedback is cumbersome and inconsistent across browsers.

Second, touch support is problematic. The API was designed primarily for mouse interactions, making touch device compatibility unreliable. This is a major issue with the increasing prevalence of mobile browsing.

Third, accessibility is often overlooked in the native implementation. Screen readers and keyboard-only users may struggle to use drag and drop interfaces built solely with the HTML5 API.

Finally, styling and animation options are restricted, making it difficult to create polished, intuitive user experiences that match modern design standards.

Building a Foundation for Custom Drag and Drop

To create a robust custom drag and drop system, we need to understand the core events that make it possible. For mouse interactions, we rely on mousedown, mousemove, and mouseup events. For touch interactions, we use touchstart, touchmove, and touchend.

Here’s a basic implementation that works with both mouse and touch events:

function createDraggable(element) {
  let active = false;
  let initialX;
  let initialY;
  let currentX;
  let currentY;
  let xOffset = 0;
  let yOffset = 0;

  element.addEventListener("touchstart", dragStart, false);
  element.addEventListener("touchend", dragEnd, false);
  element.addEventListener("touchmove", drag, false);

  element.addEventListener("mousedown", dragStart, false);
  element.addEventListener("mouseup", dragEnd, false);
  element.addEventListener("mousemove", drag, false);

  function dragStart(e) {
    if (e.type === "touchstart") {
      initialX = e.touches[0].clientX - xOffset;
      initialY = e.touches[0].clientY - yOffset;
    } else {
      initialX = e.clientX - xOffset;
      initialY = e.clientY - yOffset;
    }

    if (e.target === element) {
      active = true;
      element.classList.add("dragging");
    }
  }

  function dragEnd() {
    initialX = currentX;
    initialY = currentY;

    active = false;
    element.classList.remove("dragging");
  }

  function drag(e) {
    if (active) {
      e.preventDefault();
      
      if (e.type === "touchmove") {
        currentX = e.touches[0].clientX - initialX;
        currentY = e.touches[0].clientY - initialY;
      } else {
        currentX = e.clientX - initialX;
        currentY = e.clientY - initialY;
      }

      xOffset = currentX;
      yOffset = currentY;

      setTranslate(currentX, currentY, element);
    }
  }

  function setTranslate(xPos, yPos, el) {
    el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
  }
}

This foundation provides better cross-device compatibility than the native API, but it’s just the beginning.

Enhancing Accessibility in Drag and Drop Interfaces

Accessibility is often overlooked in drag and drop implementations. To create truly inclusive interfaces, we need to provide alternative ways to perform drag operations for users who rely on keyboards or screen readers.

One approach is to implement ARIA (Accessible Rich Internet Applications) attributes and keyboard shortcuts. For example:

function makeAccessible(dragElement, dropZones) {
  // Add appropriate ARIA attributes
  dragElement.setAttribute('aria-grabbed', 'false');
  dragElement.setAttribute('tabindex', '0');
  dragElement.setAttribute('role', 'button');
  dragElement.setAttribute('aria-label', 'Draggable item. Press Space to start dragging');
  
  // For each drop zone
  dropZones.forEach((zone, index) => {
    zone.setAttribute('aria-dropeffect', 'move');
    zone.setAttribute('tabindex', '0');
    zone.setAttribute('role', 'region');
    zone.setAttribute('aria-label', `Drop zone ${index + 1}`);
  });
  
  // Add keyboard support
  dragElement.addEventListener('keydown', (e) => {
    if (e.key === ' ' || e.key === 'Enter') {
      const isGrabbed = dragElement.getAttribute('aria-grabbed') === 'true';
      dragElement.setAttribute('aria-grabbed', !isGrabbed);
      
      if (!isGrabbed) {
        // Announce to screen readers that dragging started
        announceToScreenReader('Item grabbed. Use arrow keys to move and Enter to drop');
      } else {
        // Perform drop action
        const currentZone = getCurrentDropZone(dragElement, dropZones);
        if (currentZone) {
          dropElement(dragElement, currentZone);
          announceToScreenReader('Item dropped');
        }
      }
      e.preventDefault();
    }
    
    // Arrow key navigation when item is grabbed
    if (dragElement.getAttribute('aria-grabbed') === 'true') {
      // Implement arrow key movement
      // ...
    }
  });
}

function announceToScreenReader(message) {
  const announcer = document.getElementById('sr-announcer') || createAnnouncer();
  announcer.textContent = message;
}

function createAnnouncer() {
  const announcer = document.createElement('div');
  announcer.id = 'sr-announcer';
  announcer.setAttribute('aria-live', 'assertive');
  announcer.setAttribute('aria-atomic', 'true');
  announcer.className = 'sr-only';
  document.body.appendChild(announcer);
  return announcer;
}

Optimizing Touch Device Support and Multi-Touch Interaction

Touch devices present unique challenges for drag and drop interfaces. The absence of hover states, different precision levels, and the need to handle multi-touch gestures require special consideration.

To support pinch-to-zoom and other gestures while allowing drag operations, we can implement a more sophisticated touch handling system:

class TouchDragManager {
  constructor(element) {
    this.element = element;
    this.ongoingTouches = [];
    this.isDragging = false;
    this.initialScale = 1;
    
    element.addEventListener('touchstart', this.handleTouchStart.bind(this), false);
    element.addEventListener('touchmove', this.handleTouchMove.bind(this), false);
    element.addEventListener('touchend', this.handleTouchEnd.bind(this), false);
    element.addEventListener('touchcancel', this.handleTouchCancel.bind(this), false);
  }
  
  handleTouchStart(e) {
    e.preventDefault();
    
    const touches = e.changedTouches;
    
    // If we have exactly two touches, prepare for pinch-to-zoom
    if (touches.length === 2 && this.ongoingTouches.length === 0) {
      this.initialPinchDistance = this.getPinchDistance(touches[0], touches[1]);
      this.initialScale = this.currentScale || 1;
    }
    
    // If we have one touch and aren't already dragging, start drag
    if (touches.length === 1 && !this.isDragging && this.ongoingTouches.length === 0) {
      this.isDragging = true;
      this.dragStartX = touches[0].clientX;
      this.dragStartY = touches[0].clientY;
      this.element.classList.add('dragging');
    }
    
    // Add all new touches to our tracking array
    for (let i = 0; i < touches.length; i++) {
      this.ongoingTouches.push(this.copyTouch(touches[i]));
    }
  }
  
  handleTouchMove(e) {
    e.preventDefault();
    
    const touches = e.changedTouches;
    
    // Handle pinch-to-zoom
    if (this.ongoingTouches.length === 2 && touches.length === 2) {
      const currentDistance = this.getPinchDistance(touches[0], touches[1]);
      this.currentScale = this.initialScale * (currentDistance / this.initialPinchDistance);
      this.element.style.transform = `scale(${this.currentScale})`;
    }
    
    // Handle dragging
    if (this.isDragging && touches.length === 1) {
      const deltaX = touches[0].clientX - this.dragStartX;
      const deltaY = touches[0].clientY - this.dragStartY;
      
      this.element.style.left = `${this.element.offsetLeft + deltaX}px`;
      this.element.style.top = `${this.element.offsetTop + deltaY}px`;
      
      this.dragStartX = touches[0].clientX;
      this.dragStartY = touches[0].clientY;
    }
    
    // Update ongoing touches
    for (let i = 0; i < touches.length; i++) {
      const idx = this.ongoingTouchIndexById(touches[i].identifier);
      if (idx >= 0) {
        this.ongoingTouches.splice(idx, 1, this.copyTouch(touches[i]));
      }
    }
  }
  
  handleTouchEnd(e) {
    e.preventDefault();
    const touches = e.changedTouches;
    
    for (let i = 0; i < touches.length; i++) {
      const idx = this.ongoingTouchIndexById(touches[i].identifier);
      if (idx >= 0) {
        this.ongoingTouches.splice(idx, 1);
      }
    }
    
    if (this.ongoingTouches.length === 0) {
      this.isDragging = false;
      this.element.classList.remove('dragging');
    }
  }
  
  handleTouchCancel(e) {
    this.handleTouchEnd(e);
  }
  
  // Helper functions
  copyTouch({ identifier, clientX, clientY }) {
    return { identifier, clientX, clientY };
  }
  
  ongoingTouchIndexById(idToFind) {
    for (let i = 0; i < this.ongoingTouches.length; i++) {
      if (this.ongoingTouches[i].identifier === idToFind) {
        return i;
      }
    }
    return -1;
  }
  
  getPinchDistance(touch1, touch2) {
    const dx = touch1.clientX - touch2.clientX;
    const dy = touch1.clientY - touch2.clientY;
    return Math.sqrt(dx * dx + dy * dy);
  }
}

This implementation enables both dragging and pinch-to-zoom on touch devices, providing a more natural experience for mobile users.

Performance Optimization for Smooth Dragging Experiences

Performance is critical for drag and drop interfaces. Janky animations or delayed responses can frustrate users and make the interface feel broken. I’ve found several techniques particularly effective for optimizing performance.

First, using CSS transforms instead of changing top/left positions allows the browser to optimize rendering:

function dragElement(e) {
  // Instead of:
  // element.style.left = newX + 'px';
  // element.style.top = newY + 'px';
  
  // Use:
  element.style.transform = `translate(${newX}px, ${newY}px)`;
}

Second, using requestAnimationFrame can significantly improve performance by syncing updates with the browser’s rendering cycle:

function dragElement(e) {
  // Calculate the new position
  const newX = e.clientX - offsetX;
  const newY = e.clientY - offsetY;
  
  // Schedule the update
  requestAnimationFrame(() => {
    draggable.style.transform = `translate(${newX}px, ${newY}px)`;
  });
}

Third, adding the will-change property can hint to browsers about upcoming transformations:

.draggable {
  will-change: transform;
}

For extremely performance-sensitive applications, we can implement a throttling mechanism to limit the frequency of updates:

function throttle(callback, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastCall < delay) {
      return;
    }
    lastCall = now;
    return callback(...args);
  };
}

const throttledDrag = throttle(dragElement, 16); // Approx. 60fps
element.addEventListener('mousemove', throttledDrag);

Creating Effective Visual Feedback

Visual feedback is essential for providing users with clear cues about the drag operation. Drag previews, drop zone highlighting, and animation all contribute to an intuitive experience.

For drag previews, we can create a custom element that follows the cursor:

function createDragPreview(element) {
  const preview = element.cloneNode(true);
  
  preview.style.position = 'absolute';
  preview.style.pointerEvents = 'none';
  preview.style.zIndex = '1000';
  preview.style.opacity = '0.7';
  preview.style.width = `${element.offsetWidth}px`;
  preview.style.height = `${element.offsetHeight}px`;
  preview.classList.add('drag-preview');
  
  document.body.appendChild(preview);
  
  return preview;
}

function updatePreviewPosition(preview, x, y) {
  preview.style.transform = `translate(${x}px, ${y}px)`;
}

function removeDragPreview(preview) {
  document.body.removeChild(preview);
}

For drop zone highlighting, we can implement a system that identifies valid drop targets:

function highlightDropZones(draggedElement, dropZones) {
  dropZones.forEach(zone => {
    if (canDrop(draggedElement, zone)) {
      zone.classList.add('valid-drop-zone');
    } else {
      zone.classList.add('invalid-drop-zone');
    }
  });
}

function clearDropZoneHighlights(dropZones) {
  dropZones.forEach(zone => {
    zone.classList.remove('valid-drop-zone', 'invalid-drop-zone');
  });
}

function canDrop(element, zone) {
  // Implement custom logic to determine if element can be dropped in zone
  const elementType = element.dataset.type;
  const acceptedTypes = zone.dataset.accepts.split(',');
  
  return acceptedTypes.includes(elementType);
}

Implementing Sortable Lists

Sortable lists are a common application of drag and drop. They allow users to reorder items within a container. Here’s how I implement a basic sortable list:

class SortableList {
  constructor(listElement) {
    this.list = listElement;
    this.items = Array.from(listElement.children);
    this.draggedItem = null;
    this.draggedIndex = null;
    this.placeholder = null;
    
    this.init();
  }
  
  init() {
    this.items.forEach(item => {
      item.setAttribute('draggable', 'true');
      
      item.addEventListener('dragstart', (e) => this.onDragStart(e, item));
      item.addEventListener('dragover', (e) => this.onDragOver(e));
      item.addEventListener('drop', (e) => this.onDrop(e, item));
      item.addEventListener('dragend', () => this.onDragEnd());
    });
    
    this.list.addEventListener('dragover', (e) => this.onListDragOver(e));
    this.list.addEventListener('drop', (e) => this.onListDrop(e));
  }
  
  onDragStart(e, item) {
    this.draggedItem = item;
    this.draggedIndex = this.items.indexOf(item);
    
    // Create placeholder
    this.placeholder = document.createElement('div');
    this.placeholder.classList.add('placeholder');
    this.placeholder.style.height = `${item.offsetHeight}px`;
    
    // Set drag image
    e.dataTransfer.setDragImage(item, 0, 0);
    e.dataTransfer.effectAllowed = 'move';
    
    // Add dragging class after a short delay to allow the browser to capture the drag image
    setTimeout(() => {
      item.classList.add('dragging');
      item.style.opacity = '0.4';
      
      // Insert placeholder
      this.list.insertBefore(this.placeholder, item);
      item.style.display = 'none';
    }, 0);
  }
  
  onDragOver(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    
    const item = e.target.closest('li');
    if (item && item !== this.draggedItem) {
      const itemRect = item.getBoundingClientRect();
      const midpoint = itemRect.top + itemRect.height / 2;
      
      if (e.clientY < midpoint) {
        this.list.insertBefore(this.placeholder, item);
      } else {
        this.list.insertBefore(this.placeholder, item.nextSibling);
      }
    }
  }
  
  onListDragOver(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    
    // If dragging over empty space in the list
    if (e.target === this.list) {
      this.list.appendChild(this.placeholder);
    }
  }
  
  onDrop(e, item) {
    e.preventDefault();
    
    if (item !== this.draggedItem) {
      this.list.insertBefore(this.draggedItem, this.placeholder.nextSibling === item ? item.nextSibling : item);
    }
    
    this.finalizeDrop();
  }
  
  onListDrop(e) {
    e.preventDefault();
    
    if (e.target === this.list) {
      this.list.appendChild(this.draggedItem);
    }
    
    this.finalizeDrop();
  }
  
  onDragEnd() {
    if (this.draggedItem) {
      this.draggedItem.style.display = '';
      this.draggedItem.style.opacity = '';
      this.draggedItem.classList.remove('dragging');
    }
    
    if (this.placeholder && this.placeholder.parentNode) {
      this.placeholder.parentNode.removeChild(this.placeholder);
    }
    
    this.draggedItem = null;
    this.draggedIndex = null;
    this.placeholder = null;
    
    // Update the items array to reflect the new order
    this.items = Array.from(this.list.children);
  }
  
  finalizeDrop() {
    if (this.placeholder && this.placeholder.parentNode) {
      this.placeholder.parentNode.removeChild(this.placeholder);
    }
    
    this.draggedItem.style.display = '';
    this.draggedItem.style.opacity = '';
    this.draggedItem.classList.remove('dragging');
    
    // Update the items array
    this.items = Array.from(this.list.children);
    
    // Dispatch a custom event
    this.list.dispatchEvent(new CustomEvent('reorder', {
      detail: {
        items: this.items,
        moved: {
          element: this.draggedItem,
          fromIndex: this.draggedIndex,
          toIndex: this.items.indexOf(this.draggedItem)
        }
      }
    }));
  }
}

Building Grid-Based Positioning Systems

Grids provide structured layouts for positioning draggable elements. I’ve implemented grid-based systems for dashboards, design tools, and scheduling applications.

Here’s a basic implementation of a grid-based positioning system:

class GridSystem {
  constructor(container, options = {}) {
    this.container = container;
    this.options = {
      cellWidth: options.cellWidth || 100,
      cellHeight: options.cellHeight || 100,
      gridGap: options.gridGap || 10,
      snapToGrid: options.snapToGrid !== undefined ? options.snapToGrid : true
    };
    
    this.draggableElements = [];
    this.occupiedCells = new Map();
    
    this.init();
  }
  
  init() {
    this.container.style.position = 'relative';
    
    // Draw grid lines for visualization (optional)
    if (this.options.showGrid) {
      this.drawGridLines();
    }
  }
  
  makeDraggable(element) {
    element.style.position = 'absolute';
    
    let isDragging = false;
    let startX, startY;
    let originalX, originalY;
    
    element.addEventListener('mousedown', (e) => {
      isDragging = true;
      startX = e.clientX;
      startY = e.clientY;
      originalX = element.offsetLeft;
      originalY = element.offsetTop;
      
      element.classList.add('dragging');
      
      // Remove from occupied cells
      this.removeFromOccupiedCells(element);
    });
    
    document.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      
      const dx = e.clientX - startX;
      const dy = e.clientY - startY;
      
      element.style.left = `${originalX + dx}px`;
      element.style.top = `${originalY + dy}px`;
    });
    
    document.addEventListener('mouseup', () => {
      if (!isDragging) return;
      
      isDragging = false;
      element.classList.remove('dragging');
      
      if (this.options.snapToGrid) {
        this.snapToGrid(element);
      }
      
      // Add to occupied cells
      this.addToOccupiedCells(element);
    });
    
    this.draggableElements.push(element);
    this.addToOccupiedCells(element);
    
    return element;
  }
  
  snapToGrid(element) {
    const { cellWidth, cellHeight, gridGap } = this.options;
    const effectiveWidth = cellWidth + gridGap;
    const effectiveHeight = cellHeight + gridGap;
    
    const left = element.offsetLeft;
    const top = element.offsetTop;
    
    const gridX = Math.round(left / effectiveWidth);
    const gridY = Math.round(top / effectiveHeight);
    
    // Check if the cell is available
    const gridPosition = `${gridX},${gridY}`;
    if (this.isCellOccupied(gridPosition, element)) {
      // Find the nearest available cell
      const nearestCell = this.findNearestAvailableCell(gridX, gridY, element);
      if (nearestCell) {
        element.style.left = `${nearestCell.x * effectiveWidth}px`;
        element.style.top = `${nearestCell.y * effectiveHeight}px`;
      }
    } else {
      element.style.left = `${gridX * effectiveWidth}px`;
      element.style.top = `${gridY * effectiveHeight}px`;
    }
  }
  
  isCellOccupied(gridPosition, exceptElement = null) {
    if (!this.occupiedCells.has(gridPosition)) {
      return false;
    }
    
    const occupant = this.occupiedCells.get(gridPosition);
    return occupant !== exceptElement;
  }
  
  findNearestAvailableCell(startX, startY, element) {
    // Implementation of spiral search pattern to find nearest available cell
    let x = startX;
    let y = startY;
    let layer = 1;
    
    // Check the starting point first
    if (!this.isCellOccupied(`${x},${y}`, element)) {
      return { x, y };
    }
    
    while (layer < 10) { // Limit search to prevent infinite loops
      // Move right
      for (let i = 0; i < layer; i++) {
        x++;
        if (!this.isCellOccupied(`${x},${y}`, element)) {
          return { x, y };
        }
      }
      
      // Move down
      for (let i = 0; i < layer; i++) {
        y++;
        if (!this.isCellOccupied(`${x},${y}`, element)) {
          return { x, y };
        }
      }
      
      layer++;
      
      // Move left
      for (let i = 0; i < layer; i++) {
        x--;
        if (!this.isCellOccupied(`${x},${y}`, element)) {
          return { x, y };
        }
      }
      
      // Move up
      for (let i = 0; i < layer; i++) {
        y--;
        if (!this.isCellOccupied(`${x},${y}`, element)) {
          return { x, y };
        }
      }
      
      layer++;
    }
    
    return null;
  }
  
  addToOccupiedCells(element) {
    const { cellWidth, cellHeight, gridGap } = this.options;
    const effectiveWidth = cellWidth + gridGap;
    const effectiveHeight = cellHeight + gridGap;
    
    const gridX = Math.round(element.offsetLeft / effectiveWidth);
    const gridY = Math.round(element.offsetTop / effectiveHeight);
    
    this.occupiedCells.set(`${gridX},${gridY}`, element);
  }
  
  removeFromOccupiedCells(element) {
    this.occupiedCells.forEach((value, key) => {
      if (value === element) {
        this.occupiedCells.delete(key);
      }
    });
  }
  
  drawGridLines() {
    // Implementation for visual grid lines
    const { cellWidth, cellHeight, gridGap } = this.options;
    const effectiveWidth = cellWidth + gridGap;
    const effectiveHeight = cellHeight + gridGap;
    
    const containerWidth = this.container.offsetWidth;
    const containerHeight = this.container.offsetHeight;
    
    const gridOverlay = document.createElement('div');
    gridOverlay.classList.add('grid-overlay');
    gridOverlay.style.position = 'absolute';
    gridOverlay.style.top = '0';
    gridOverlay.style.left = '0';
    gridOverlay.style.right = '0';
    gridOverlay.style.bottom = '0';
    gridOverlay.style.pointerEvents = 'none';
    
    // Vertical lines
    for (let x = 0; x < containerWidth; x += effectiveWidth) {
      const line = document.createElement('div');
      line.classList.add('grid-line', 'vertical');
      line.style.position = 'absolute';
      line.style.top = '0';
      line.style.bottom = '0';
      line.style.left = `${x}px`;
      line.style.width = '1px';
      line.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
      gridOverlay.appendChild(line);
    }
    
    // Horizontal lines
    for (let y = 0; y < containerHeight; y += effectiveHeight) {
      const line = document.createElement('div');
      line.classList.add('grid-line', 'horizontal');
      line.style.position = 'absolute';
      line.style.left = '0';
      line.style.right = '0';
      line.style.top = `${y}px`;
      line.style.height = '1px';
      line.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
      gridOverlay.appendChild(line);
    }
    
    this.container.appendChild(gridOverlay);
  }
}

Animation Techniques for Natural Feel

Animations add polish to drag and drop interactions. They can provide visual cues about the dragging state, highlight potential drop targets, and smooth transitions when elements are repositioned.

Here’s a system for animating drag and drop interactions:

class AnimatedDragDrop {
  constructor(element, options = {}) {
    this.element = element;
    this.options = {
      dragStartScale: options.dragStartScale || 1.05,
      dragStartOpacity: options.dragStartOpacity || 0.8,
      dragSpeed: options.dragSpeed || 1,
      dropDuration: options.dropDuration || 300,
      dropEasing: options.dropEasing || 'cubic-bezier(0.2, 0.9, 0.3, 1.2)', // Slight bounce
      highlightColor: options.highlightColor || 'rgba(0, 123, 255, 0.2)'
    };
    
    this.isDragging = false;
    this.initialPosition = { x: 0, y: 0 };
    this.dragStartPosition = { x: 0, y: 0 };
    
    this.init();
  }
  
  init() {
    this.element.style.transition = 'transform 0.2s, opacity 0.2s';
    
    this.element.addEventListener('mousedown', this.handleMouseDown.bind(this));
    document.addEventListener('mousemove', this.handleMouseMove.bind(this));
    document.addEventListener('mouseup', this.handleMouseUp.bind(this));
  }
  
  handleMouseDown(e) {
    e.preventDefault();
    
    this.isDragging = true;
    
    // Store initial position
    this.initialPosition = {
      x: this.element.offsetLeft,
      y: this.element.offsetTop
    };
    
    // Store drag start position
    this.dragStartPosition = {
      x: e.clientX,
      y: e.clientY
    };
    
    // Apply starting animation
    this.element.style.transition = 'transform 0.2s, opacity 0.2s';
    this.element.style.transform = `scale(${this.options.dragStartScale})`;
    this.element.style.opacity = this.options.dragStartOpacity;
    this.element.classList.add('dragging');
    
    // After starting animation completes, remove transition for smooth dragging
    setTimeout(() => {
      if (this.isDragging) {
        this.element.style.transition = 'none';
      }
    }, 200);
  }
  
  handleMouseMove(e) {
    if (!this.isDragging) return;
    
    const dx = (e.clientX - this.