Menu
Table of Contents

Livewire Drag And Drop - v2.0

Home

Welcome to the complete documentation for ArtisanPack UI's Livewire Drag and Drop package! This accessibility-first solution brings intuitive drag-and-drop functionality to your Laravel Livewire applications with full WCAG 2.1 AA compliance.

🚀 Quick Start

New to ArtisanPack UI Livewire Drag and Drop? Start here:

📚 Getting Started Guide

Your comprehensive introduction to installation, configuration, and basic implementation. Learn how to set up the package in your Laravel application and create your first drag-and-drop interface.

Topics covered:

  • Prerequisites and system requirements
  • Installation via NPM or CDN
  • Alpine.js configuration
  • Basic usage examples
  • Initial styling setup

📖 Documentation

🔧 API Reference

Complete technical reference for all directives, events, and methods available in the package.

What you'll find:

  • x-drag-context directive documentation
  • x-drag-item directive reference
  • Event handling and custom events
  • Method signatures and parameters
  • Advanced configuration options

♿ Accessibility Guide

Comprehensive guide to the accessibility features and best practices for inclusive drag-and-drop interfaces.

Key topics:

  • WCAG 2.1 AA compliance details
  • Screen reader support and testing
  • Keyboard navigation patterns
  • ARIA attributes and semantic markup
  • Live announcements and feedback
  • Accessibility testing strategies

🛠️ Troubleshooting

Solutions to common issues and debugging guidance for smooth implementation.

Common solutions for:

  • Installation and setup problems
  • Browser compatibility issues
  • Performance optimization
  • Integration challenges
  • Accessibility debugging
  • Custom styling conflicts

🤝 Contributing

💡 Contributing Guide

Learn how to contribute to the ArtisanPack UI Livewire Drag and Drop project.

Guidelines for:

  • Setting up the development environment
  • Code style and standards
  • Testing requirements
  • Pull request process
  • Bug reporting
  • Feature suggestions

🌟 Key Features

  • 🎯 Accessibility-First: Built with WCAG 2.1 AA compliance from the ground up
  • ⌨️ Full Keyboard Support: Complete keyboard navigation with intuitive shortcuts
  • 🎨 Alpine.js Integration: Native directives designed for the TALL stack
  • 🔄 Livewire Compatible: Seamless backend integration with custom events
  • 📱 Touch Friendly: Works across all devices and input methods
  • 🎪 Flexible Implementation: Perfect for lists, kanban boards, and complex UIs
  • 🔊 Screen Reader Ready: Comprehensive support for assistive technologies

📦 Package Information

  • Package Name: @artisanpack-ui/livewire-drag-and-drop
  • Compatibility: Laravel 10.x/11.x, Livewire 3.x, Alpine.js 3.x
  • License: MIT
  • Support: PHP 8.1+

🎯 Getting Help

If you need assistance or have questions:

  1. Check the documentation - Start with the Getting Started Guide
  2. Review troubleshooting - Common issues are covered in Troubleshooting
  3. Search existing issues - Check the project repository for known issues
  4. Open a new issue - Follow the guidelines in Contributing Guide

Welcome to building accessible, intuitive drag-and-drop interfaces with ArtisanPack UI! 🎉