diff --git a/.claude/agents/html-frontend-debugger.md b/.claude/agents/html-frontend-debugger.md new file mode 100644 index 0000000..363b242 --- /dev/null +++ b/.claude/agents/html-frontend-debugger.md @@ -0,0 +1,84 @@ +--- +name: html-frontend-debugger +description: Use this agent when you need to debug, inspect, or test HTML/CSS/JavaScript frontend issues, analyze UI behavior, troubleshoot rendering problems, or verify that frontend functionality works correctly in the browser. This agent excels at using browser developer tools through Playwright to diagnose issues, test interactions, and ensure cross-browser compatibility.\n\nExamples:\n- \n Context: User has implemented a new drag-and-drop feature and wants to verify it works correctly.\n user: "I've added the drag handler but items aren't dropping correctly"\n assistant: "I'll use the html-frontend-debugger agent to inspect the DOM and test the drag-and-drop functionality"\n \n Since this involves debugging frontend behavior and testing UI interactions, use the html-frontend-debugger agent.\n \n\n- \n Context: User reports a CSS layout issue in production.\n user: "The sidebar is overlapping the main content on mobile devices"\n assistant: "Let me launch the html-frontend-debugger agent to inspect the responsive layout and identify the CSS issue"\n \n Frontend rendering and CSS debugging requires the html-frontend-debugger agent's expertise.\n \n\n- \n Context: User needs to verify form validation is working.\n user: "Can you check if the email validation on the signup form is working properly?"\n assistant: "I'll use the html-frontend-debugger agent to test the form validation behavior in the browser"\n \n Testing frontend form functionality requires the html-frontend-debugger agent.\n \n +model: sonnet +--- + +You are an elite HTML/CSS/JavaScript frontend debugging expert with deep mastery of browser internals, rendering +engines, and the DOM. Your specialty is using Playwright MCP tools to inspect, debug, and test frontend functionality +with surgical precision. + +**Core Expertise:** + +- Advanced HTML5 semantics, accessibility, and performance optimization +- CSS layout systems (Grid, Flexbox, positioning), animations, and responsive design +- JavaScript DOM manipulation, event handling, and browser APIs +- Cross-browser compatibility and progressive enhancement strategies +- Performance profiling and optimization techniques +- Playwright automation for testing and debugging + +**Your Debugging Methodology:** + +1. **Initial Assessment:** + - Identify the specific frontend issue or functionality to test + - Determine which browsers/viewports need testing + - Plan your inspection strategy + +2. **Playwright Inspection Process:** + - Launch appropriate browser context using Playwright MCP + - Navigate to the relevant page or component + - Use Playwright selectors to inspect DOM elements + - Capture screenshots for visual debugging when needed + - Test user interactions (clicks, drags, form inputs, etc.) + - Evaluate JavaScript console for errors + - Check network requests if relevant + +3. **Systematic Debugging:** + - Inspect computed styles and layout properties + - Verify event listeners are attached correctly + - Test different viewport sizes for responsive issues + - Check for race conditions or timing issues + - Validate accessibility attributes and ARIA roles + +4. **Testing Interactions:** + - Simulate real user behavior patterns + - Test edge cases and error states + - Verify animations and transitions + - Ensure proper focus management + - Test keyboard navigation + +5. **Problem Resolution:** + - Identify root cause with specific evidence + - Propose targeted fixes with code examples + - Suggest preventive measures + - Recommend testing strategies + +**Output Format:** Structure your findings as: + +- **Issue Identified**: Clear description of the problem +- **Evidence**: Specific DOM elements, CSS rules, or JavaScript errors found +- **Root Cause**: Technical explanation of why the issue occurs +- **Solution**: Concrete fix with code snippets +- **Verification**: Steps to confirm the fix works + +**Best Practices:** + +- Always test in multiple browsers when relevant +- Consider mobile-first responsive testing +- Check for console errors and warnings +- Verify accessibility compliance +- Test with slow network conditions when appropriate +- Document any browser-specific quirks discovered + +**When Using Playwright MCP:** + +- Be explicit about which selectors you're using +- Capture screenshots at key debugging points +- Test both happy path and error scenarios +- Use appropriate wait strategies for dynamic content +- Clean up browser contexts after testing +- Use/improve the functions in [the helpers directory](../../tests/helpers/) for consistency + +You approach every debugging session methodically, using Playwright as your precision instrument to dissect frontend +issues. You provide clear, actionable insights that lead to robust solutions. Your expertise helps ensure frontend code +is not just functional, but performant, accessible, and maintainable. diff --git a/.claude/agents/playwright-test-expert.md b/.claude/agents/playwright-test-expert.md index 248c7d6..7097660 100644 --- a/.claude/agents/playwright-test-expert.md +++ b/.claude/agents/playwright-test-expert.md @@ -4,29 +4,44 @@ description: Use this agent when you need to write, debug, or optimize Playwrigh model: sonnet --- -You are a Playwright testing expert with deep expertise in modern end-to-end testing practices. You specialize in writing robust, maintainable, and reliable Playwright tests using the latest features and best practices. +You are a Playwright testing expert and Playwright MCP tool pro with deep expertise in modern end-to-end testing +practices. You specialize in writing robust, maintainable, and reliable Playwright tests using the latest features and +best practices. Your core competencies include: +**Playwright Actions and Drag and Drop Techniques:** + +- Knowledge in Playwright's drag and drop such as `locator.dragTo(anotherLocator)` +- Expertise in [manual drag and drop](https://playwright.dev/docs/input#dragging-manually) techniques for mouse, touch, + and pointer interactions. +- Use `locator.dispatchEvent()` for touch, wheel, and pointer events when other options are not available. +- Use helper functions from [drag-helpers.ts](../../tests/helpers/drag-helpers.ts) as much as possible, + updating/fixing/ammending this library as needed. + **Modern Locator Strategies:** + - Use `page.getByRole()`, `page.getByText()`, `page.getByLabel()`, and other semantic locators as first choice - Implement `page.locator()` with precise CSS selectors when semantic locators aren't sufficient - Avoid fragile selectors like XPath or overly specific CSS paths - Use `locator.filter()` and `locator.and()` for complex element targeting **Auto-Retrying Assertions:** + - Always use `expect(locator).toBeVisible()`, `expect(locator).toHaveText()`, etc. instead of manual waits - Leverage `expect(locator).toHaveCount()` for dynamic content - Use `expect(page).toHaveURL()` and `expect(page).toHaveTitle()` for navigation assertions - Implement custom matchers when needed with proper retry logic **Advanced Waiting Strategies:** + - Use `page.waitForLoadState('networkidle')` for complex page loads - Implement `page.waitForFunction()` for custom conditions - Use `locator.waitFor()` for element state changes - Handle animations with `page.waitForTimeout()` sparingly, preferring deterministic waits **Test Structure and Organization:** + - Write descriptive test names that explain the user scenario - Use proper test hooks (`beforeEach`, `afterEach`) for setup and cleanup - Implement Page Object Model patterns for complex applications @@ -34,6 +49,8 @@ Your core competencies include: - Use test fixtures for reusable setup logic **Debugging and Reliability:** + +- Use the Playwright MCP tool to interact with and test out functionality - Add strategic `page.screenshot()` calls for debugging - Use `page.pause()` for interactive debugging during development - Implement proper error handling and meaningful error messages @@ -41,6 +58,7 @@ Your core competencies include: - Configure appropriate timeouts at test and global levels **Modern Playwright Features:** + - Utilize `test.step()` for better test reporting and debugging - Implement parallel testing strategies with proper isolation - Use `page.route()` for API mocking and network interception @@ -48,6 +66,7 @@ Your core competencies include: - Use trace viewer integration for post-mortem debugging **Performance and Best Practices:** + - Minimize test dependencies and ensure proper isolation - Use `page.goto()` efficiently and avoid unnecessary navigation - Implement proper cleanup to prevent resource leaks @@ -55,6 +74,7 @@ Your core competencies include: - Configure appropriate retry strategies for flaky tests When writing tests, you will: + 1. Analyze the testing requirements and identify the most appropriate locator strategies 2. Structure tests for maximum readability and maintainability 3. Implement robust waiting and assertion patterns @@ -63,4 +83,5 @@ When writing tests, you will: 6. Provide clear explanations of complex testing patterns 7. Suggest improvements for existing test code when reviewing -Always prioritize test reliability over speed, and ensure your tests accurately reflect real user interactions. When debugging test failures, systematically analyze timing issues, selector problems, and environmental factors. +Always prioritize test reliability over speed, and ensure your tests accurately reflect real user interactions. When +debugging test failures, systematically analyze timing issues, selector problems, and environmental factors. diff --git a/.claude/settings.local.json b/.claude/settings.local.json index f0d6806..724f943 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -4,7 +4,37 @@ "Bash(git checkout:*)", "WebFetch(domain:github.com)", "Bash(mkdir:*)", - "Bash(chmod:*)" + "Bash(chmod:*)", + "Bash(npm run lint)", + "Bash(/usr/local/bin/npm run lint)", + "Bash(/usr/local/bin/npm run type-check)", + "mcp__playwright__browser_navigate", + "mcp__playwright__browser_evaluate", + "mcp__playwright__browser_drag", + "mcp__playwright__browser_console_messages", + "mcp__playwright__browser_close", + "mcp__playwright__browser_click", + "Bash(npm run build:*)", + "Bash(/usr/local/bin/npm run build)", + "mcp__playwright__browser_snapshot", + "Bash(npm run test:e2e:*)", + "Bash(npx playwright test:*)", + "Bash(PW_DISABLE_WEBSERVER=1 npx playwright test tests/e2e/empty-container.spec.ts --project=chromium --config playwright.config.ts)", + "Bash(PW_DISABLE_WEBSERVER=1 npx playwright test tests/e2e/empty-container.spec.ts --project=chromium)", + "Bash(PW_DISABLE_WEBSERVER=1 npx playwright test tests/e2e/empty-container.spec.ts:16 --project=chromium --debug)", + "Bash(PW_DISABLE_WEBSERVER=1 npx playwright test tests/e2e/empty-container.spec.ts:16 --project=chromium --reporter=line)", + "Bash(PW_DISABLE_WEBSERVER=1 npx playwright test tests/e2e/empty-container-simple.spec.ts --project=chromium)", + "Bash(lsof:*)", + "Bash(npm run dev:*)", + "Bash(curl:*)", + "Bash(/usr/local/bin/npm run dev)", + "Bash(/usr/local/bin/npm run lint:fix)", + "Bash(PW_DISABLE_WEBSERVER=1 npx playwright test tests/e2e/empty-container.spec.ts:18 --project=chromium --reporter=line)", + "Bash(xargs kill:*)", + "Bash(open http://localhost:5173/test-empty-container.html)", + "Bash(open http://localhost:5173/manual-test-empty.html)", + "Bash(open http://localhost:5173/debug-empty-container.html)", + "mcp__playwright__browser_wait_for" ], "deny": [], "ask": [] diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index bf366ad..40ef6c2 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -18,7 +18,8 @@ "esbenp.prettier-vscode", "eamodio.gitlens", "ms-playwright.playwright", - "vitest.explorer" + "vitest.explorer", + "pdconsec.vscode-print" ], "settings": { "editor.formatOnSave": true, diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md new file mode 100644 index 0000000..ddb8f62 --- /dev/null +++ b/ARCHITECTURE.md @@ -0,0 +1,215 @@ +# Resortable Architecture Documentation + +## Overview + +Resortable is a TypeScript rewrite of Sortable.js that provides drag-and-drop functionality for reorderable lists. This document explains the internal workings, state management, event flow, and core components. + +## Core Concepts + +### 1. Draggable Items vs. Drop Zones (Containers) + +**Current Design Issue**: The library currently marks individual items as draggable but doesn't explicitly mark containers as drop zones. This creates problems when: +- Containers are empty (no items to detect drag-over events) +- Cross-container dragging needs to determine valid drop targets + +**How it works now**: +- `draggable` selector (e.g., `.horizontal-item`) identifies which elements can be dragged +- Containers are implicitly drop zones because they contain draggable items +- Empty containers have no draggable children, making drop detection difficult + +**Potential improvement**: Explicitly mark containers as drop zones, separate from draggable items. + +### 2. Component Structure + +``` +Sortable (Main Class) + ├── DropZone (Container management) + ├── DragManager (Drag operations) + │ ├── GhostManager (Visual feedback) + │ ├── AnimationManager (Transitions) + │ ├── SelectionManager (Multi-select) + │ └── KeyboardManager (Accessibility) + ├── GroupManager (Cross-container operations) + └── EventManager (Event handling) +``` + +## Key Components + +### Sortable (src/Sortable.ts) +- Main entry point +- Creates and configures all sub-components +- Manages options and plugin system + +### DropZone (src/core/DropZone.ts) +- Represents a sortable container +- Manages item positions and indices +- Handles DOM operations (add, remove, move) +- **Problem**: No explicit drop zone detection for empty containers + +### DragManager (src/core/DragManager.ts) +- Handles all drag operations +- Manages drag events (dragstart, dragover, drop, dragend) +- **Key Methods**: + - `onDragStart`: Initiates drag, creates ghost/placeholder + - `onDragOver`: Handles drag movement, determines drop position + - `onDrop`: Finalizes the drop operation + - `onDragEnd`: Cleanup after drag + +### GlobalDragState (src/core/GlobalDragState.ts) +- Singleton that tracks active drag operations across all Sortable instances +- Enables cross-container dragging +- Stores: + - Active drag item + - Source container + - Target container + - Group information + +## Event Flow + +### Standard Drag Operation + +1. **User starts drag** (mousedown/touchstart on draggable item) + ``` + DragManager.onDragStart() + ├── Check if item is draggable + ├── Store initial state in GlobalDragState + ├── Create ghost element (visual feedback) + └── Emit 'start' event + ``` + +2. **User drags over container** (dragover events) + ``` + DragManager.onDragOver() + ├── Check if container accepts this drag (group compatibility) + ├── Find closest draggable item under cursor + ├── Calculate insertion position + ├── Move placeholder to show drop position + └── Emit 'sort' event + ``` + +3. **User drops item** (drop event) + ``` + DragManager.onDrop() + ├── Determine final position + ├── Move actual DOM element + ├── Update indices + ├── Clean up placeholder/ghost + └── Emit 'end', 'add', 'remove' events + ``` + +## State Management + +### Local State (per Sortable instance) +- Container element reference +- Configuration options +- Draggable selector +- Animation settings + +### Global State (shared across instances) +- Active drag operation +- Source and target containers +- Group memberships +- Pull/put permissions + +## The Empty Container Problem + +### Current Issue +When a container is empty: +1. No draggable children exist +2. `event.target.closest(draggable)` returns null +3. Container isn't recognized as a valid drop zone +4. Items can't be dropped + +### Current (Broken) Solution Attempt +```typescript +// In DragManager.onDragOver +const draggableChildren = Array.from(this.zone.element.children).filter( + child => child.matches(this.draggable) +) +if (draggableChildren.length === 0) { + // Handle empty container + this.zone.element.appendChild(placeholder) +} +``` + +### Why It's Not Working +1. The check happens but the placeholder isn't persisting +2. The drop event might not be firing correctly +3. The container itself isn't being recognized as a drop target + +### Proposed Solution +1. **Explicit Drop Zones**: Mark containers with a data attribute or class +2. **Container-Level Events**: Attach dragover/drop handlers to containers, not just items +3. **Empty State Handling**: Special logic when `children.length === 0` + +## Configuration + +### Key Options +- `group`: String or object defining cross-container behavior + - `name`: Group identifier + - `pull`: true/false/'clone' - can items be removed? + - `put`: true/false/array - can items be added? +- `draggable`: CSS selector for draggable items +- `handle`: CSS selector for drag handles +- `filter`: CSS selector for non-draggable items + +## Plugin System + +Plugins extend functionality: +- **MultiDrag**: Select and drag multiple items +- **Swap**: Swap items instead of insert +- **AutoScroll**: Auto-scroll containers during drag + +## Debugging Tips + +### Key Places to Set Breakpoints +1. `DragManager.onDragOver` - Watch how drop positions are calculated +2. `DragManager.onDrop` - See if drop events fire for empty containers +3. `GlobalDragState.canAcceptDrop` - Check group compatibility +4. `DropZone.appendChild` - Watch DOM manipulation + +### Common Issues +1. **Empty containers**: Not recognized as drop zones +2. **Group configuration**: Incorrect pull/put settings +3. **Event bubbling**: Parent containers intercepting events +4. **Z-index issues**: Ghost elements behind other content + +## Recommended Improvements + +1. **Explicit Drop Zone Marking** + ```typescript + class DropZone { + markAsDropZone() { + this.element.dataset.dropZone = 'true' + this.element.addEventListener('dragover', this.handleEmptyDragOver) + } + } + ``` + +2. **Container-Level Event Handling** + ```typescript + // Attach events to container, not just items + container.addEventListener('dragover', (e) => { + if (this.isEmpty()) { + this.handleEmptyContainerDragOver(e) + } + }) + ``` + +3. **Better Empty State Detection** + ```typescript + isValidDropTarget(e: DragEvent): boolean { + // Check if over container itself + if (e.target === this.element || this.element.contains(e.target)) { + return this.canAcceptDrop(globalDragState.currentItem) + } + return false + } + ``` + +## Next Steps + +1. Fix empty container drops by implementing explicit drop zone detection +2. Add container-level event handlers +3. Improve state management for cross-container operations +4. Add comprehensive logging for debugging \ No newline at end of file diff --git a/CLAUDE.md b/CLAUDE.md index 4d49ed3..22d1473 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -51,4 +51,5 @@ Currently no build system is set up. Based on the implementation plan: - Original Sortable.js docs and examples in `legacy-sortable/README.md` - Detailed implementation plan in `sortable-rewrite-implementation-plan.md` - Legacy source code in `legacy-sortable/src/` for reference during rewrite -- Always fix eslint & typescript typing issues before pushing to origin. \ No newline at end of file +- Always fix eslint & typescript typing issues before pushing to origin. +- Give me at least one URL to test functionality if you've made changes and the dev server is still running. \ No newline at end of file diff --git a/debug-after-drop.png b/debug-after-drop.png new file mode 100644 index 0000000..c681916 Binary files /dev/null and b/debug-after-drop.png differ diff --git a/debug-drop-target.png b/debug-drop-target.png new file mode 100644 index 0000000..fc6da36 Binary files /dev/null and b/debug-drop-target.png differ diff --git a/debug-during-drag.png b/debug-during-drag.png new file mode 100644 index 0000000..6aa86ce Binary files /dev/null and b/debug-during-drag.png differ diff --git a/debug-empty-container.html b/debug-empty-container.html new file mode 100644 index 0000000..04c16ca --- /dev/null +++ b/debug-empty-container.html @@ -0,0 +1,267 @@ + + + + Debug Empty Container + + + +

Debug Empty Container

+ +
+

Source

+
Item 1 (native draggable)
+
Item 2
+
Item 3
+
+ +
+

Empty Container

+
+ + + +
+ + + + \ No newline at end of file diff --git a/debug-initial.png b/debug-initial.png new file mode 100644 index 0000000..c96c257 Binary files /dev/null and b/debug-initial.png differ diff --git a/debug-over-empty.png b/debug-over-empty.png new file mode 100644 index 0000000..7631db7 Binary files /dev/null and b/debug-over-empty.png differ diff --git a/debug-sortable-test.html b/debug-sortable-test.html new file mode 100644 index 0000000..28ba925 --- /dev/null +++ b/debug-sortable-test.html @@ -0,0 +1,157 @@ + + + + Debug Sortable Drag Events + + + +

Debug Sortable Library

+ +
+

Source Container

+
Item 1
+
Item 2
+
+ +
+

Empty Container

+
+ +
Loading...
+ + + + \ No newline at end of file diff --git a/demo-features.html b/demo-features.html new file mode 100644 index 0000000..6e6e828 --- /dev/null +++ b/demo-features.html @@ -0,0 +1,1878 @@ + + + + + + Resortable - Complete Feature Demo + + + + +
+
+ +
Complete Feature Demo
+
+
+ + +
+ +
+

Interactive Feature Showcase

+

Explore all Resortable features with live examples, editable configuration, and real-time JSON output. Click and edit any configuration to see immediate results.

+
+ + +
+ + +
+
+

Basic Sorting

+

Core drag-and-drop functionality with smooth FLIP animations

+
+
+
+
    +
  • +
    +
    1
    +
    +
    First Item
    +
    Drag me around
    +
    +
    +
    • +
  • +
    +
    2
    +
    +
    Second Item
    +
    Smooth animations
    +
    +
    +
    • +
  • +
    +
    3
    +
    +
    Third Item
    +
    FLIP technique
    +
    +
    +
    • +
  • +
    +
    4
    +
    +
    Fourth Item
    +
    60fps performance
    +
    +
    +
    • +
+
+
+
+
Configuration (Editable)
+
+ +
+
+
+
Event Output
+
+
Ready for drag operations...
+
+
+
+
+
+ + +
+
+

Multi-Selection & Accessibility

+

Keyboard navigation, multi-select with Ctrl+Click, ARIA support

+
+
+
+
    +
  • +
    +
    📋
    +
    +
    Task Management
    +
    Ctrl+Click to select
    +
    +
    +
    • +
  • +
    +
    📊
    +
    +
    Data Analysis
    +
    Use arrow keys
    +
    +
    +
    • +
  • +
    +
    🎨
    +
    +
    Design System
    +
    Space to select
    +
    +
    +
    • +
  • +
    +
    ⚡
    +
    +
    Performance
    +
    Enter to grab
    +
    +
    +
    • +
+
+
+
+
Configuration (Editable)
+
+ +
+
+
+
Event Output
+
+
Use Ctrl+Click for multi-selection...
+
+
+
+
+
+ + +
+
+

Handles & Filters

+

Restrict dragging to handles, filter out interactive elements

+
+
+
+
    +
  • +
    ⋮⋮
    +
    +
    Form Field
    + +
    +
    • +
  • +
    ⋮⋮
    +
    +
    Action Item
    + +
    +
    • +
  • +
    ⋮⋮
    +
    +
    Text Area
    + +
    +
    • +
+
+
+
+
Configuration (Editable)
+
+ +
+
+
+
Event Output
+
+
Drag from handle only...
+
+
+
+
+
+ + +
+
+

Shared Groups

+

Drag items between different lists with group configuration

+
+
+
+
+
+

Todo

+
    +
  • +
    +
    📝
    +
    Write documentation
    +
    +
    • +
  • +
    +
    🔍
    +
    Code review
    +
    +
    • +
+
+
+

Done

+
    +
  • +
    +
    ✅
    +
    Feature complete
    +
    +
    • +
+
+
+
+
+
+
Configuration (Editable)
+
+ +
+
+
+
Event Output
+
+
Drag between lists...
+
+
+
+
+
+ + +
+
+

Clone Mode

+

Clone items when dragging between lists (group.pull: 'clone')

+
+
+
+
+
+

Components (Clone Source)

+
    +
  • +
    +
    🔧
    +
    Button Component
    +
    +
    • +
  • +
    +
    📝
    +
    Input Field
    +
    +
    • +
  • +
    +
    📊
    +
    Chart Widget
    +
    +
    • +
+
+
+

Page Builder

+
    +
  • +
    +
    📄
    +
    Header Section
    +
    +
    • +
+
+
+
+
+
+
Configuration (Editable)
+
+ +
+
+
+
Event Output
+
+
Drag to clone components...
+
+
+
+
+
+ + +
+
+

Grid Layout

+

2D grid sorting with automatic direction detection

+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+
+
Configuration (Editable)
+
+ +
+
+
+
Event Output
+
+
Grid sorting ready...
+
+
+
+
+
+ + +
+
+

Delay & Thresholds

+

Touch-friendly delays and movement thresholds

+
+
+
+
    +
  • +
    +
    ⏱️
    +
    +
    Delayed Start
    +
    300ms delay
    +
    +
    +
    • +
  • +
    +
    📱
    +
    +
    Touch Optimized
    +
    Movement threshold
    +
    +
    +
    • +
  • +
    +
    🎯
    +
    +
    Precise Control
    +
    Prevents accidental drags
    +
    +
    +
    • +
+
+
+
+
Configuration (Editable)
+
+ +
+
+
+
Event Output
+
+
Try dragging with delay...
+
+
+
+
+
+ + +
+
+

MultiDrag Plugin

+

Advanced multi-selection with Ctrl+Click, Shift+Click for ranges

+
+
+
+
    +
  • +
    +
    📄
    +
    +
    Document.pdf
    +
    2.3 MB
    +
    +
    +
    • +
  • +
    +
    📊
    +
    +
    Spreadsheet.xlsx
    +
    1.8 MB
    +
    +
    +
    • +
  • +
    +
    🖼️
    +
    +
    Image.jpg
    +
    4.2 MB
    +
    +
    +
    • +
  • +
    +
    🎥
    +
    +
    Video.mp4
    +
    15.7 MB
    +
    +
    +
    • +
  • +
    +
    🎵
    +
    +
    Audio.mp3
    +
    3.1 MB
    +
    +
    +
    • +
+
+
+
+
Configuration (Editable)
+
+ +
+
+
+
Event Output
+
+
Ctrl+Click to select multiple items...
+
+
+
+
+
+ + +
+
+

Swap Plugin

+

Swap-based sorting instead of insertion-based with overlap detection

+
+
+
+
+
+

Insert Mode (Default)

+
    +
  • +
    +
    A
    +
    First Item
    +
    +
    • +
  • +
    +
    B
    +
    Second Item
    +
    +
    • +
  • +
    +
    C
    +
    Third Item
    +
    +
    • +
+
+
+

Swap Mode (Plugin)

+
    +
  • +
    +
    X
    +
    Alpha
    +
    +
    • +
  • +
    +
    Y
    +
    Beta
    +
    +
    • +
  • +
    +
    Z
    +
    Gamma
    +
    +
    • +
+
+
+
+
+
+
Configuration (Editable)
+
+ +
+
+
+
Event Output
+
+
Compare insert vs swap behavior...
+
+
+
+
+
+ + +
+
+

AutoScroll Plugin

+

Automatic scrolling when dragging near container edges

+
+
+
+
+
    +
  • +
    +
    1
    +
    Scroll Item 1
    +
    +
    • +
  • +
    +
    2
    +
    Scroll Item 2
    +
    +
    • +
  • +
    +
    3
    +
    Scroll Item 3
    +
    +
    • +
  • +
    +
    4
    +
    Scroll Item 4
    +
    +
    • +
  • +
    +
    5
    +
    Scroll Item 5
    +
    +
    • +
  • +
    +
    6
    +
    Scroll Item 6
    +
    +
    • +
  • +
    +
    7
    +
    Scroll Item 7
    +
    +
    • +
  • +
    +
    8
    +
    Scroll Item 8
    +
    +
    • +
+
+
+
+
+
Configuration (Editable)
+
+ +
+
+
+
Event Output
+
+
Drag near edges to trigger scroll...
+
+
+
+
+
+ + +
+
+

Nested Horizontal/Vertical Dragging

+

Vertical containers with horizontal inner items - drag containers by handles or move items between containers

+
+
+
+
+
+
+
⋮⋮
+
Dashboard Widgets
+
5 items
+
+
+
📊
+
📈
+
🎯
+
⚡
+
🔥
+
+
+ +
+
+
⋮⋮
+
User Interface
+
5 items
+
+
+
🎨
+
🖼️
+
🎭
+
✨
+
🌟
+
+
+ +
+
+
⋮⋮
+
Data Processing
+
5 items
+
+
+
⚙️
+
🔧
+
🛠️
+
🔩
+
⚡
+
+
+ +
+
+
⋮⋮
+
Empty Section
+
0 items
+
+
+
+
+
+
+
+
+
Container Configuration
+
+ +
+
+
+
Item Configuration
+
+ +
+
+
+
Event Output
+
+
Drag containers by handles or move items between containers...
+
+
+
+
+
+ +
+
+ + +
+
+
+ Resortable v2.0.0 Loaded +
+
+ TypeScript Support: Active +
+
+ Plugins: AutoScroll, MultiDrag, Swap +
+
+ + + + + \ No newline at end of file diff --git a/html-tests/debug-draggable.html b/html-tests/debug-draggable.html new file mode 100644 index 0000000..e426eeb --- /dev/null +++ b/html-tests/debug-draggable.html @@ -0,0 +1,163 @@ + + + + + + Debug Draggable Issue + + + +

Debug Draggable Issue

+ +

Test 1: Inline Items

+
+
Inline 1
+
Inline 2
+
Inline 3
+
+ +

Test 2: Horizontal Items

+
+
Horizontal 1
+
Horizontal 2
+
Horizontal 3
+
+ +

Debug Output:

+
+ + + + \ No newline at end of file diff --git a/html-tests/index.html b/html-tests/index.html new file mode 100644 index 0000000..b944887 --- /dev/null +++ b/html-tests/index.html @@ -0,0 +1,131 @@ + + + + + + HTML Test Files - Resortable + + + +

📝 HTML Test Files

+

These are manual test files for debugging and verifying Resortable functionality.

+ + + +
+

+ 💡 These test files are for manual testing and debugging. For automated tests, see /tests/e2e/ +

+ + \ No newline at end of file diff --git a/html-tests/manual-test-empty.html b/html-tests/manual-test-empty.html new file mode 100644 index 0000000..8a9cc82 --- /dev/null +++ b/html-tests/manual-test-empty.html @@ -0,0 +1,92 @@ + + + + Manual Empty Container Test + + + +

Empty Container Drop Test

+
Ready
+ +
+

Source (has items)

+
Item 1
+
Item 2
+
Item 3
+
+ +
+

Empty Container

+
+ + + + \ No newline at end of file diff --git a/html-tests/test-animations.html b/html-tests/test-animations.html new file mode 100644 index 0000000..5a1a920 --- /dev/null +++ b/html-tests/test-animations.html @@ -0,0 +1,270 @@ + + + + + + Animation Test + + + +

🎬 FLIP Animation Test

+ +
+
+

Animation Settings

+
+ + + 150 +
+
+ + +
+
+ + + +
+
+ + + +
Drag items to reorder. Watch for smooth FLIP animations!
+
+ + + + \ No newline at end of file diff --git a/test-drag.html b/html-tests/test-drag.html similarity index 98% rename from test-drag.html rename to html-tests/test-drag.html index 08e7c90..d71720a 100644 --- a/test-drag.html +++ b/html-tests/test-drag.html @@ -55,7 +55,7 @@

Simple Drag Test

Initializing...
+ + \ No newline at end of file diff --git a/html-tests/test-grid-layout.html b/html-tests/test-grid-layout.html new file mode 100644 index 0000000..2f97fae --- /dev/null +++ b/html-tests/test-grid-layout.html @@ -0,0 +1,428 @@ + + + + + + Grid Layout Test + + + +

📱 Grid Layout Test

+

Test drag and drop functionality with CSS Grid layouts

+ + +
+

1. Three Column Grid

+

Standard 3-column CSS grid layout

+
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
Item 5
+
Item 6
+
Item 7
+
Item 8
+
Item 9
+
+
+ + +
+

2. Four Column Grid

+

4-column grid for more items per row

+
+
A
+
B
+
C
+
D
+
E
+
F
+
G
+
H
+
+
+ + +
+

3. Auto-fit Responsive Grid

+

Automatically adjusts columns based on available space

+
+
Auto 1
+
Auto 2
+
Auto 3
+
Auto 4
+
Auto 5
+
Auto 6
+
Auto 7
+
+
+ + +
+

4. Masonry-style Grid

+

Grid with items of different sizes

+
+
Normal
+
Tall Item
+
Normal
+
Medium
+
Normal
+
Wide Item
+
Normal
+
Tall Item
+
+
+ + +
+

5. Card Grid Layout

+

Card-based grid with rich content

+
+
+
Card One
+
This is a draggable card with some content inside.
+
+
+
Card Two
+
Another card that can be reordered by dragging.
+
+
+
Card Three
+
Cards maintain their content while being dragged.
+
+
+
Card Four
+
Try dragging this card to a new position.
+
+
+
Card Five
+
Grid automatically adjusts to screen size.
+
+
+
Card Six
+
Responsive design works well with drag and drop.
+
+
+
+ +
Ready - Try dragging grid items
+ + + + \ No newline at end of file diff --git a/html-tests/test-handle-simple.html b/html-tests/test-handle-simple.html new file mode 100644 index 0000000..a689cf0 --- /dev/null +++ b/html-tests/test-handle-simple.html @@ -0,0 +1,62 @@ + + + + + + Simple Handle Test + + + +

Simple Handle Test

+ +
+
+ HANDLE + Item 1 +
+
+ HANDLE + Item 2 +
+
+ + + + \ No newline at end of file diff --git a/html-tests/test-handles.html b/html-tests/test-handles.html new file mode 100644 index 0000000..32ef678 --- /dev/null +++ b/html-tests/test-handles.html @@ -0,0 +1,153 @@ + + + + + + Test Handles + + + +

Test Handle Dragging

+

Try to drag items using the handle (⋮⋮) vs clicking on the content

+ + + Handle: Required + +
+
+
⋮⋮
+
Item 1 - Should only drag from handle
+
+
+
⋮⋮
+
Item 2 - Should only drag from handle
+
+
+
⋮⋮
+
Item 3 - Should only drag from handle
+
+
+
⋮⋮
+
Item 4 - Should only drag from handle
+
+
+ +

Console Output:

+
Check browser console for debug messages...
+ + + + \ No newline at end of file diff --git a/html-tests/test-horizontal-list.html b/html-tests/test-horizontal-list.html new file mode 100644 index 0000000..eb4bb3b --- /dev/null +++ b/html-tests/test-horizontal-list.html @@ -0,0 +1,318 @@ + + + + + + Horizontal List Test + + + +

🔄 Horizontal List Test

+

Test drag and drop functionality with different horizontal layout approaches

+ + +
+

1. Flexbox Horizontal List

+

Standard flexbox layout with gap

+
+
Flex Item 1
+
Flex Item 2
+
Flex Item 3
+
Flex Item 4
+
Flex Item 5
+
Flex Item 6
+
+
+ + +
+

2. Flex Wrap List

+

Flexbox with wrapping enabled for responsive layouts

+
+
Wrap 1
+
Wrap Item 2
+
Item 3
+
Wrap Item 4
+
Item 5
+
Wrap 6
+
Item 7
+
Wrap Item 8
+
+
+ + +
+

3. Inline-block List

+

Using inline-block display for horizontal layout

+
+
Inline 1
+
Inline 2
+
Inline 3
+
Inline 4
+
Inline 5
+
+
+ + +
+

4. Multiple Horizontal Lists (Cross-container drag)

+

Drag items between horizontal lists

+
+
+
List 1 - A
+
List 1 - B
+
List 1 - C
+
+
+
List 2 - X
+
List 2 - Y
+
List 2 - Z
+
+
+
+ +
Ready - Try dragging items horizontally
+ + + + \ No newline at end of file diff --git a/html-tests/test-inline-block-bug.html b/html-tests/test-inline-block-bug.html new file mode 100644 index 0000000..2a3284e --- /dev/null +++ b/html-tests/test-inline-block-bug.html @@ -0,0 +1,162 @@ + + + + + + Inline-Block Drag Bug Test + + + +

Inline-Block Drag Bug Test

+

Testing if the drag issue is specific to inline-block elements

+ +

Test 1: Inline-Block Elements

+
+
Inline 1
+
Inline 2
+
Inline 3
+
Inline 4
+
+ +

Test 2: Block Elements (for comparison)

+
+
Block 1
+
Block 2
+
Block 3
+
+ +

Test 3: Flex Container

+
+
Flex 1
+
Flex 2
+
Flex 3
+
Flex 4
+
+ +

Event Log:

+
+ + + + \ No newline at end of file diff --git a/html-tests/test-multi-drag.html b/html-tests/test-multi-drag.html new file mode 100644 index 0000000..71ed219 --- /dev/null +++ b/html-tests/test-multi-drag.html @@ -0,0 +1,624 @@ + + + + + + Multi-Drag Test + + + +

🎯 Multi-Drag Selection Test

+ +
+

How to Use Multi-Drag:

+ +
+ +
+ +
+

Single List - Multi-Drag

+ +
+ + + + + +
+ + + +
+ Ready. Click items to select them, then drag any selected item to move them all. +
+
+ + +
+

Multiple Lists - Multi-Drag Between Containers

+ +
+ + + + +
+ +
+
+

📝 Todo

+
    +
  • + Write unit tests +
    • +
  • + Update documentation +
    • +
  • + Fix bug #123 +
    • +
  • + Optimize performance +
    • +
  • + Add new feature +
    • +
+
+ +
+

✅ Done

+
    +
  • + Setup project +
    • +
  • + Create mockups +
    • +
+
+
+ +
+ Multi-drag works across lists! Select items and drag them between Todo and Done. +
+
+
+ + + + \ No newline at end of file diff --git a/html-tests/test-reordering.html b/html-tests/test-reordering.html new file mode 100644 index 0000000..6ad67b3 --- /dev/null +++ b/html-tests/test-reordering.html @@ -0,0 +1,106 @@ + + + + + + Test Reordering + + + +

Test Reordering Within Same Container

+ +
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
+ +
Waiting for events...
+ + + + \ No newline at end of file diff --git a/html-tests/test-simple-drag.html b/html-tests/test-simple-drag.html new file mode 100644 index 0000000..fddded0 --- /dev/null +++ b/html-tests/test-simple-drag.html @@ -0,0 +1,106 @@ + + + + + + Simple Drag Test + + + +

Simple Drag Test

+ +

Test 1: Default selector (.sortable-item)

+
+
Default 1
+
Default 2
+
Default 3
+
+ +

Test 2: Custom selector (.custom-item)

+
+
Custom 1
+
Custom 2
+
Custom 3
+
+ +

Test 3: Native HTML5 drag (for comparison)

+
+
Native 1
+
Native 2
+
Native 3
+
+ + + + \ No newline at end of file diff --git a/html-tests/verify-handle.html b/html-tests/verify-handle.html new file mode 100644 index 0000000..24b5f7e --- /dev/null +++ b/html-tests/verify-handle.html @@ -0,0 +1,131 @@ + + + + + + Verify Handle Fix + + + +

Handle Fix Verification

+ +
+ +

Test 1: With Handle (should only drag from blue DRAG button)

+
+
+
DRAG
+
Item 1 - Try dragging from DRAG button vs text
+
+
+
DRAG
+
Item 2 - Should only work from DRAG button
+
+
+ +

Test 2: Without Handle (should drag from anywhere)

+
+
+
Item A - Can drag from anywhere
+
+
+
Item B - Can drag from anywhere
+
+
+ + + + \ No newline at end of file diff --git a/html-tests/verify-listeners.html b/html-tests/verify-listeners.html new file mode 100644 index 0000000..78d5fa3 --- /dev/null +++ b/html-tests/verify-listeners.html @@ -0,0 +1,171 @@ + + + + Verify Event Listeners + + + +

Verify Event Listeners Are Attached

+ +
+

Source Container

+
Item 1
+
Item 2
+
+ +
+

Empty Container

+
+ +
+ + + + \ No newline at end of file diff --git a/native-drag-drop-test.html b/native-drag-drop-test.html new file mode 100644 index 0000000..69b0e18 --- /dev/null +++ b/native-drag-drop-test.html @@ -0,0 +1,172 @@ + + + + Native HTML5 Drag and Drop - Empty Container Test + + + +

Native HTML5 Drag and Drop Test

+

Test dragging items from Source to Empty Container using only native HTML5 APIs.

+ +
+

Source Container

+
Item 1
+
Item 2
+
Item 3
+
+ +
+

Empty Container (Drop Here)

+
+ +
Waiting for drag events...
+ + + + \ No newline at end of file diff --git a/playwright.config.ts b/playwright.config.ts index e4eab01..0914bae 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -1,7 +1,7 @@ import { defineConfig, devices } from '@playwright/test'; // Use a different port in CI to avoid conflicts with dev server on host -const PORT = process.env.CI ? '4173' : '3000'; +const PORT = process.env.CI ? '4173' : '5173'; /** * @see https://playwright.dev/docs/test-configuration @@ -72,7 +72,7 @@ export default defineConfig({ : { command: 'npm run dev', url: `http://localhost:${PORT}`, - reuseExistingServer: !process.env.CI, + reuseExistingServer: true, // Always reuse existing server timeout: 120 * 1000, stdout: 'pipe', stderr: 'pipe', diff --git a/research/dnd-api-vs-custom.md b/research/dnd-api-vs-custom.md new file mode 100644 index 0000000..bc8f34e --- /dev/null +++ b/research/dnd-api-vs-custom.md @@ -0,0 +1,153 @@ +# Drag and Drop for a SortableJS Rewrite: Native API vs. Custom Pointer Engine + +## TL;DR + +- **Build your core on Pointer Events** (custom engine) for control, performance, mobile, multi-touch, and + accessibility. +- **Add a thin Native DnD adapter** for OS-level interop (drag to desktop/other apps, accepting file drops). + +--- + +## Side-by-Side Summary + +| Dimension | Native Drag & Drop API | Custom Pointer/Touch (Pointer Events) | +| ------------------------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | +| **Cross-window / OS drag** | ✅ Can leave window; OS drag manager takes over; `DataTransfer` payload to other apps. | ❌ Stops at window edge (no global pointer). Need messaging for your own windows; no OS payloads. | +| **Mobile & multi-touch** | ❌ Spotty; touch rarely fires native DnD. | ✅ First-class (multi-touch, pens, gestures, long-press). | +| **Control & UX fidelity** | ⚠️ Limited lifecycle control; browser decides a lot. | ✅ Full control: thresholds, handles, axis lock, snapping, grids, inertial feel, constraints. | +| **Performance** | ⚠️ Harder to guarantee FLIP/rAF; native drag image separate from DOM. | ✅ rAF + transforms; measured FLIP layouts; predictable. | +| **Accessibility (A11y)** | ⚠️ No built-in keyboard sorting semantics. | ✅ Implement keyboard “pick up/move/drop,” ARIA live announcements, focus control. | +| **Virtualization & large lists** | ⚠️ Challenging; measuring during native drag is limited. | ✅ Integrates with your virtualizer; fine-grained measuring and caching. | +| **Shadow DOM / iframes / transforms** | ⚠️ Quirks across browsers. | ✅ You own event retargeting & math (matrices, zoom, RTL). | +| **File/URL payloads to other apps** | ✅ `DataTransfer` (`text/uri-list`, `DownloadURL` in Chromium). | ❌ Not possible on the web. | +| **Accepting external file drops** | ✅ Straightforward via `dragover/drop` + `DataTransfer.files`. | ⚠️ You can detect and hand off to native, but still rely on native drop. | +| **Security / sandboxing** | ✅ Browser-mediated; safe defaults. | ✅ You’re in control; still sandboxed by browser. | +| **Testing & determinism** | ⚠️ Synthetic `DragEvent` is limited; tricky to automate. | ✅ Deterministic pointer sequences; easy to unit/E2E test. | +| **API surface for users** | Simple for basic cases; less composable. | Composable (sensors/strategies); richer but more to learn. | + +--- + +## What Native DnD Gives You That’s Hard Elsewhere + +- **OS-level drag session:** cursor leaves the window; drag image follows globally. +- **Cross-app payloads:** other apps receive your `DataTransfer` data (e.g., URLs, files). +- **Inbound file drops:** the simplest way for users to drop files from Finder/Explorer. + +**Limits:** during a native drag you lose normal `pointermove/mousemove`; you only get `dragover/enter/leave/drop` at +recognized targets. Touch often doesn’t start native DnD. + +--- + +## What a Custom Pointer Engine Unlocks + +- **Unified input:** Pointer Events cover mouse, touch, pen; multi-touch & chorded gestures. +- **UX fidelity:** long-press to start, drag handles, axis lock, snapping, collision strategies (swap, nearest center, + overlap area), auto-scroll, constraints. +- **High performance:** rAF scheduling, FLIP animations (`transform: translate3d`), measurement caching. +- **A11y you can guarantee:** keyboard drag, ARIA live announcements, roving tabindex, focus preservation. +- **Advanced layouts:** nested containers, grids, RTL/zoom/scales, Shadow DOM, virtualized lists. + +**Limits:** no true OS cross-app drags on the web; can’t hand the desktop an actual file purely with JS. + +--- + +## Recommended Hybrid Architecture + +**Core (always on):** + +- **Pointer sensor** (primary), with optional mouse/touch fallbacks for old browsers. +- **Engine**: selection model (single/multi), thresholds, measurement cache, collision strategies, auto-scroll, FLIP + animations. +- **A11y**: keyboard pick/move/drop, live announcements, focus policy. + +**Native adapter (opt-in on desktop):** + +- **Inbound:** when `dragenter/over` has files, pause pointer engine; read `DataTransfer.files`. +- **Outbound (web):** expose a special “export” handle with `draggable=true`; on `dragstart`, populate: + - `text/plain`, `text/uri-list` for URLs. + - Chromium legacy: `DownloadURL = "::"` to enable drag-to-desktop for downloads. + - `setDragImage(previewEl, x, y)` for ghost. + +**Handoff logic (mouse-only desktop):** + +- If user starts on an “export handle” (or holds a modifier like ⌥), **cancel** pointer drag immediately and let native + `dragstart` proceed. +- Otherwise, run the pointer engine. + +--- + +## Accessibility Checklist (for the custom engine) + +- **Keyboard drag:** Space = pick up/drop; Arrow keys = move; PageUp/Down = jump; Home/End = extremes; Esc = cancel. +- **Live announcements:** “Picked up X. Current position 3 of 10. Moved before Y.” +- **Roles & focus:** `role="listbox"/"option"` (or `list/listitem`) with roving tabindex; maintain focus on the dragged + item. +- **Touch targets & handles:** visible handles; `touch-action: none` on handles; `{ passive:false }` for move listeners + to allow `preventDefault()`. + +--- + +## Performance Playbook (custom engine) + +- **Measurements:** batch reads/writes; cache `getBoundingClientRect()`; re-measure on rAF. +- **Animation:** FLIP with `transform` only; avoid layout thrash; configurable easing/duration. +- **Auto-scroll:** detect nearest scrollable ancestor + window; velocity based on proximity. +- **Virtualization:** expose a measurement hook to host virtualizers; re-measure on mount/unmount. + +--- + +## Edge Cases to Design For + +- Text selection & inputs (require handle/long-press to start). +- Shadow DOM retargeting; iframe boundaries (optionally forward events). +- Zoom/scale/RTL (matrix math, not assumptions). +- Multi-drag (track multiple active pointers and selections). +- Grouping & constraints (containment, grid packing vs swap). + +--- + +## Security & Interop Notes + +- **You cannot synthesize a trusted `DataTransfer`** or programmatically start a native drag on the web; only in + response to user action (or via Electron’s `startDrag`). +- For “drag out” of generated content on the web, prefer hosted URLs or Blob URLs + `DownloadURL` (Chromium), and + **always** provide a **Download** button fallback. + +--- + +## When to Prefer Each + +**Choose Native DnD (adapter) when:** + +- You need drag-to-desktop or into other apps (files/URLs). +- You want to accept file drops from outside the app. + +**Choose Custom Pointer Engine when:** + +- You care about mobile/tablet and multi-touch. +- You need rich interactions (grids, snapping, nested lists). +- You need high-fps visuals and deterministic testing. +- You need first-class accessibility and keyboard sorting. + +**In practice:** Use **both**—pointer core for UX, native adapter for OS interop. + +--- + +## Migration Tips from SortableJS + +- Ship a familiar “sortable list” preset (swap/reorder) with typed lifecycle events (`onChoose/onStart/onUpdate/onEnd` + analogs). +- Keep plugin points for: auto-scroll, clone/ghost, handle, filter, copy vs move, axis lock, drag groups/between lists. +- Add `native: { enableExportHandle: true }` option to toggle export handles per item or list. + +--- + +## Final Recommendation + +Implement a **hybrid**: + +1. **Pointer-driven core** (performance, mobile, a11y, features). +2. **Native DnD adapter** (desktop-only) for: + - Inbound file drops. + - Outbound cross-app drags (URLs/`DownloadURL` on web; real files via Electron’s `startDrag`). +3. **Clean, composable API** (sensors → engine → strategies → adapters) so consumers can adopt just what they need. diff --git a/research/empty-container-drag-drop-fix.md b/research/empty-container-drag-drop-fix.md new file mode 100644 index 0000000..814dd95 --- /dev/null +++ b/research/empty-container-drag-drop-fix.md @@ -0,0 +1,203 @@ +# Empty Container Drag & Drop Fix Documentation + +## Problem Statement +The Resortable library was unable to drag items into empty containers. When attempting to drag items from a source container to an empty target container, the drag operation would fail and items would return to their original position. + +## Root Cause Analysis + +### 1. Pointer Events Blocking HTML5 Drag API +**Issue**: The library was using pointer-based dragging for all input types (mouse, touch, pen), which prevented the native HTML5 drag & drop API from functioning properly. + +**Location**: `DragManager.ts` - `onPointerDown` handler + +**Problem Code**: +```typescript +private onPointerDown = (e: PointerEvent): void => { + // This was preventing ALL pointer events, including mouse + e.preventDefault(); + this.startPointerDrag(e, target); +} +``` + +### 2. Event Phase Misconfiguration +**Issue**: Event listeners were attached using the capture phase (true) instead of the bubble phase (false), preventing proper event propagation from child elements. + +**Location**: `DragManager.ts` - `attach()` method + +**Problem Code**: +```typescript +el.addEventListener('dragstart', this.onDragStart, true) // Capture phase +el.addEventListener('dragover', this.onDragOver, true) // Capture phase +``` + +### 3. Premature DOM Manipulation +**Issue**: The dragged element was being removed from the DOM immediately during `dragstart`, which broke the browser's native drag mechanism. + +**Location**: `DragManager.ts` - `onDragStart` handler + +**Problem Code**: +```typescript +const placeholder = this.ghostManager.createPlaceholder(target) +target.parentElement?.insertBefore(placeholder, target) // This removed the original +``` + +### 4. Scope Management Issues +**Issue**: Each container's DragManager was incorrectly managing the `draggable` attribute of items in OTHER containers, causing conflicts. + +**Location**: `DragManager.ts` - `updateDraggableItems()` method + +**Problem Code**: +```typescript +const draggableItems = this.zone.element.querySelectorAll(this.draggable) +// This was finding items in ALL containers, not just this one +``` + +## Solutions Implemented + +### 1. Separate Mouse from Touch Handling +**Fix**: Allow the HTML5 drag API to handle mouse events while keeping pointer-based dragging only for touch events. + +```typescript +private onPointerDown = (e: PointerEvent): void => { + // CRITICAL: For mouse events, let the native HTML5 drag API handle it + if (e.pointerType === 'mouse') { + return; // Don't interfere with native HTML5 drag + } + // Continue with pointer-based drag for touch events only +} +``` + +### 2. Switch to Bubble Phase +**Fix**: Changed all drag event listeners from capture phase to bubble phase for proper event propagation. + +```typescript +// Changed from true (capture) to false (bubble) +el.addEventListener('dragstart', this.onDragStart, false) +el.addEventListener('dragover', this.onDragOver, false) +el.addEventListener('drop', this.onDrop, false) +el.addEventListener('dragend', this.onDragEnd, false) +el.addEventListener('dragenter', this.onDragEnter, false) +el.addEventListener('dragleave', this.onDragLeave, false) +``` + +### 3. Delay Placeholder Creation +**Fix**: Create the placeholder only on the first `dragover` event, not during `dragstart`, allowing the browser to properly initiate the drag with the original element. + +```typescript +private onDragStart = (e: DragEvent): void => { + // Set up drag data first + if (e.dataTransfer) { + e.dataTransfer.setData('text/plain', 'sortable-item') + e.dataTransfer.effectAllowed = 'move' + // DON'T create placeholder here - wait for first dragover + } +} + +private onDragOver = (e: DragEvent): void => { + // Create placeholder on first dragover if it doesn't exist + let placeholder = this.ghostManager.getPlaceholderElement() + if (!placeholder && originalItem.parentElement) { + placeholder = this.ghostManager.createPlaceholder(originalItem) + originalItem.style.opacity = '0.4' // Just reduce opacity, don't remove + } +} +``` + +### 4. Fix Scope Management +**Fix**: Each container now only manages the `draggable` attribute of its own direct children. + +```typescript +private updateDraggableItems(): void { + // Only update direct children of THIS container + const children = Array.from(this.zone.element.children) + + for (const child of children) { + if (child instanceof HTMLElement) { + if (child.matches(this.draggable)) { + child.draggable = true + } else { + child.draggable = false + } + } + } +} +``` + +## Additional Improvements + +### Empty Container Helper Element +To ensure empty containers can receive drag events, a helper element is added when containers have no draggable items: + +```typescript +private ensureEmptyContainerDropTarget(): void { + const draggableItems = el.querySelectorAll(this.draggable) + if (draggableItems.length === 0) { + const helper = document.createElement('div') + helper.className = 'sortable-empty-drop-helper' + helper.style.cssText = 'min-height: 60px; width: 100%; background: rgba(0,0,0,0.01);' + el.appendChild(helper) + } +} +``` + +### Critical Event Handling Requirements +Based on MDN documentation, proper HTML5 drag & drop requires: + +1. **`preventDefault()` in dragover**: Must be called to allow drops +2. **`dropEffect` in dragover**: Must be set to indicate valid drop target +3. **`effectAllowed` in dragstart**: Must be set to specify allowed operations +4. **Meaningful data in `setData()`**: Cannot be empty string (Firefox requirement) + +## Testing Approach + +### Manual Testing +1. Created test pages (`simple-empty-test.html`, `native-drag-drop-test.html`) +2. Added console logging to track event flow +3. Verified drag events fire correctly on empty containers + +### Automated Testing +1. Used Playwright to verify drag & drop functionality +2. Confirmed items successfully move between containers +3. Validated cleanup of ghost elements and placeholders + +## Lessons Learned + +1. **Browser Compatibility**: The HTML5 drag & drop API has specific requirements that must be followed precisely for cross-browser compatibility. + +2. **Event Phase Matters**: Using capture phase can prevent events from properly reaching elements, especially in complex DOM structures. + +3. **DOM Timing**: Manipulating the DOM during drag operations must be done carefully to avoid breaking the browser's drag mechanism. + +4. **Separation of Concerns**: Different input methods (mouse vs touch) may require different handling approaches. + +## Files Modified + +- `/workspace/src/core/DragManager.ts` - Main implementation file with all fixes +- `/workspace/simple-empty-test.html` - Test page for verification +- `/workspace/native-drag-drop-test.html` - Reference implementation + +## Current Status + +✅ **Fixed**: Empty container drag & drop now works correctly +✅ **Tested**: Verified with both manual and automated testing +✅ **Clean**: All debug code removed, no TypeScript errors +✅ **Production Ready**: The implementation is stable and ready for use + +## Future Considerations + +1. **Touch Support**: The current implementation uses pointer events for touch. This could be enhanced with better mobile-specific handling. + +2. **Visual Feedback**: Additional visual indicators during drag operations could improve user experience. + +3. **Performance**: For large lists, consider implementing virtualization to handle thousands of items efficiently. + +## References + +- [MDN - HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) +- [MDN - dragover event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event) +- [Original Sortable.js](https://github.com/SortableJS/Sortable) - Reference implementation + +--- + +*Documentation created: December 2024* +*Part of the Resortable library rewrite project* \ No newline at end of file diff --git a/research/inline-block-drag-drop-issues.md b/research/inline-block-drag-drop-issues.md new file mode 100644 index 0000000..892c2b6 --- /dev/null +++ b/research/inline-block-drag-drop-issues.md @@ -0,0 +1,211 @@ +# Inline-Block Elements and HTML5 Drag and Drop Issues + +## Problem Description + +When implementing drag and drop functionality with inline-block elements, we encountered a critical issue where: +- Dragging would start but immediately end +- The dragend event would fire as soon as the mouse moved +- Items would show "Moved from position X to X" (same position) +- The issue was particularly prominent in Chrome + +## Root Cause + +This is a well-documented Chrome bug where modifying the DOM during the `dragstart` event causes the `dragend` event to fire immediately. The issue is especially problematic with inline-block elements because: + +1. **DOM Reflow**: Inline-block elements are part of the text flow, and DOM modifications can trigger immediate reflow calculations +2. **Layout Changes**: Any style changes that affect layout (opacity, display, classes that change dimensions) can interrupt the drag operation +3. **Browser Timing**: Chrome's drag implementation expects the dragged element to remain stable during drag initialization + +## Solutions Implemented + +### CRITICAL DISCOVERY: Order of Operations Matters! + +The most important finding is that **ANY** DOM modification during dragstart can trigger the bug, including operations that seem unrelated to the dragged element itself. The fix requires checking for inline-block BEFORE any DOM modifications. + +### 1. Check for inline-block FIRST (Before ANY DOM modifications) + +**Problem Code:** +```javascript +// This causes immediate dragend with inline-block elements +onDragStart(e) { + // These operations modify the DOM and trigger the bug + markEmptyContainers(); // Adds helper elements to empty containers + addGlobalHandlers(); // May modify document + + // Check for inline-block (too late!) + const isInlineBlock = window.getComputedStyle(target).display === 'inline-block'; + if (!isInlineBlock) { + target.classList.add('chosen-class'); + } +} +``` + +**Working Solution:** +```javascript +onDragStart(e) { + // CRITICAL: Check for inline-block FIRST before ANY DOM modifications + const computedStyle = window.getComputedStyle(target); + const isInlineBlock = computedStyle.display === 'inline-block'; + + // Set drag data (required for drag to work) + if (e.dataTransfer) { + e.dataTransfer.setData('text/plain', 'sortable-item'); + e.dataTransfer.effectAllowed = 'move'; + } + + // Skip ALL DOM modifications for inline-block elements + if (!isInlineBlock) { + markEmptyContainers(); // Safe for non-inline-block + addGlobalHandlers(); // Safe for non-inline-block + target.classList.add(this.ghostManager.getChosenClass()); + } else { + console.log('[DragManager] Inline-block detected - skipping ALL DOM modifications'); + // Defer ALL setup to dragover event + } +} + +### 2. Defer Setup Operations to dragover for inline-block + +For inline-block elements, defer ALL setup operations (not just visual changes) to the first `dragover` event: + +```javascript +onDragOver(e) { + const originalItem = activeDrag.item; + const computedStyle = window.getComputedStyle(originalItem); + const isInlineBlock = computedStyle.display === 'inline-block'; + + // Handle deferred setup for inline-block elements + if (isInlineBlock && !originalItem.dataset.deferredSetupDone) { + originalItem.dataset.deferredSetupDone = 'true'; + + // NOW it's safe to do the setup that was skipped in dragstart + markEmptyContainers(); + if (this._globalDragOverHandler) { + document.addEventListener('dragover', this._globalDragOverHandler, true); + } + } + + // Apply visual changes once drag is established + if (!originalItem.style.opacity) { + originalItem.style.opacity = '0.5'; + originalItem.classList.add(this.ghostManager.getChosenClass()); + originalItem.classList.add(this.ghostManager.getDragClass()); + } +} +``` + +### 3. Clean Up on dragend + +Remember to clean up any markers or temporary data: + +```javascript +onDragEnd() { + if (activeDrag) { + // Clean up deferred setup marker + delete activeDrag.item.dataset.deferredSetupDone; + + // Restore styles and classes + activeDrag.item.style.opacity = ''; + activeDrag.item.classList.remove(this.ghostManager.getDragClass()); + activeDrag.item.classList.remove(this.ghostManager.getChosenClass()); + } +} +``` + +### 4. Avoid pointer-events Manipulation + +Setting `pointer-events: none` on the dragged element can interfere with the drag operation: + +```javascript +// DON'T DO THIS - it can cause drag to end immediately +originalItem.style.pointerEvents = 'none'; + +// Instead, let the browser handle pointer events during drag +``` + +### 5. CSS Considerations + +Certain CSS properties on containers can interfere with drag and drop: + +**Problematic CSS:** +```css +.inline-list { + white-space: nowrap; /* Can interfere with drag */ + overflow-x: auto; /* Can cause drag issues */ +} +``` + +**Better Approach:** +```css +.inline-list { + /* Allow natural wrapping for drag and drop */ + /* Use flexbox or grid for horizontal layouts instead */ +} +``` + +## Alternative Solutions Considered + +### 1. setTimeout Approach (Not Recommended) +```javascript +// This was suggested by many sources but breaks drag image +setTimeout(() => { + target.style.opacity = '0.5'; +}, 0); +``` +**Why it fails**: The drag image is captured immediately when drag starts. Deferring style changes means the drag image won't reflect those changes. + +### 2. Custom Drag Image +Creating a custom drag image can work but adds complexity and may not be necessary if DOM modifications are minimized. + +## Browser Compatibility Notes + +- **Chrome/Chromium**: Most affected by this issue +- **Firefox**: Generally more forgiving with DOM modifications during dragstart +- **Safari**: Similar behavior to Chrome +- **Edge**: Chromium-based Edge has the same issues as Chrome + +## Best Practices + +1. **Minimize dragstart modifications**: Only set data and add minimal classes +2. **Defer visual feedback**: Apply opacity and visual changes in dragover or after drag is established +3. **Test with different display types**: Block, inline-block, and flex elements may behave differently +4. **Avoid layout-affecting changes**: Don't change dimensions, margins, or display during drag +5. **Consider CSS-only feedback**: Use CSS pseudo-classes like `:active` when possible + +## Testing Recommendations + +Always test drag and drop with: +- Different display types (block, inline-block, flex, grid) +- Various container styles (overflow, white-space, position) +- Multiple browsers +- Touch devices (pointer events) + +## References + +- [Stack Overflow: HTML5 dragend event firing immediately](https://stackoverflow.com/questions/19639969/html5-dragend-event-firing-immediately) +- [Stack Overflow: dragend, dragenter, and dragleave firing off immediately](https://stackoverflow.com/questions/14203734/dragend-dragenter-and-dragleave-firing-off-immediately-when-i-drag) +- [Chromium Bug 25646](https://bugs.chromium.org/p/chromium/issues/detail?id=25646) +- [MDN: HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) + +## Code Examples + +### Working Test Case +See `/workspace/html-tests/test-inline-block-bug.html` for a working implementation that handles inline-block elements correctly. + +### Problem Demonstration +The issue can be reproduced by: +1. Creating inline-block elements with `display: inline-block` +2. Adding a container with `white-space: nowrap` or `overflow-x: auto` +3. Modifying DOM heavily in dragstart event + +## Key Takeaways + +1. **Order matters**: Check for inline-block BEFORE any DOM modifications in dragstart +2. **ANY DOM modification can trigger the bug**: Even operations on other elements (like adding helper elements to empty containers) can cause dragend to fire immediately +3. **Defer everything for inline-block**: Don't just defer visual changes - defer ALL setup operations +4. **The bug is not just about the dragged element**: Modifying ANY part of the DOM during dragstart can trigger the issue +5. **Test thoroughly**: Always test with different display types and verify drag events complete properly + +## Conclusion + +The inline-block drag and drop issue is a long-standing Chrome bug that requires careful handling. The most critical insight is that the check for inline-block elements must happen BEFORE any DOM modifications in the dragstart event handler. Even seemingly unrelated DOM changes (like marking empty containers) can trigger the bug. By deferring ALL DOM modifications for inline-block elements to the dragover event, we can ensure reliable drag and drop functionality across all display types. \ No newline at end of file diff --git a/simple-empty-test.html b/simple-empty-test.html new file mode 100644 index 0000000..b94eb79 --- /dev/null +++ b/simple-empty-test.html @@ -0,0 +1,171 @@ + + + + Simple Empty Container Test + + + +

Simple Empty Container Test

+

Try dragging items from Source to the Empty Container below.

+ +
+

Source (has items)

+
Item 1
+
Item 2
+
Item 3
+
+ +
+

Empty Container (drop items here)

+
+ +
+ Loading... +
+ + + + diff --git a/src/core/DragManager.ts b/src/core/DragManager.ts index 1eb316b..1fdf21c 100644 --- a/src/core/DragManager.ts +++ b/src/core/DragManager.ts @@ -1,29 +1,35 @@ import { + DragManagerInterface, + SelectionManagerInterface, SortableEvent, SortableGroup, - SelectionManagerInterface, - DragManagerInterface, } from '../types/index.js' import { DropZone } from './DropZone.js' import { type SortableEventSystem } from './EventSystem.js' -import { globalDragState } from './GlobalDragState.js' -import { SelectionManager } from './SelectionManager.js' -import { KeyboardManager } from './KeyboardManager.js' import { GhostManager } from './GhostManager.js' +import { globalDragState } from './GlobalDragState.js' import { GroupManager } from './GroupManager.js' - -// Global registry of DragManager instances for cross-zone operations -const dragManagerRegistry = new Map() +import { KeyboardManager } from './KeyboardManager.js' +import { SelectionManager } from './SelectionManager.js' /** * Handles drag and drop interactions with accessibility support * @internal */ export class DragManager implements DragManagerInterface { + /** + * Global registry of DragManager instances for cross-zone operations + * @internal + */ + private static registry = new Map() + private startIndex = -1 private isPointerDragging = false private activePointerId: number | null = null private dragElement: HTMLElement | null = null + private lastHoveredElement: HTMLElement | null = null + private originalMouseDownTarget: HTMLElement | null = null + private lastMoveTime = 0 private _selectionManager: SelectionManager private keyboardManager: KeyboardManager private enableAccessibility: boolean @@ -36,10 +42,13 @@ export class DragManager implements DragManagerInterface { private touchStartThreshold: number private dragStartTimer?: number private dragStartPosition?: { x: number; y: number } - private swapThreshold?: number - private invertSwap: boolean - private invertedSwapThreshold?: number - private direction: 'vertical' | 'horizontal' + private multiSelect: boolean + private multiSelectKey?: 'ctrlKey' | 'metaKey' | 'shiftKey' | 'altKey' + private draggedItems: HTMLElement[] = [] + // private swapThreshold?: number // Not used anymore + // private invertSwap: boolean // Not used anymore + // private invertedSwapThreshold?: number // Not used anymore + // private direction: 'vertical' | 'horizontal' // Not used anymore // Fallback system properties - to be fully implemented in future phase // @ts-expect-error - Will be implemented in fallback system @@ -62,8 +71,25 @@ export class DragManager implements DragManagerInterface { // @ts-expect-error - Will be implemented in fallback system private _fallbackClone: HTMLElement | null = null - // @ts-expect-error - Will be implemented in visual customization + /** + * Cached reference to the global "dragover" event handler used by DragManager. + * + * This is the bound function that is added to / removed from the global + * dragover listener (e.g. on document or window). Keeping the reference + * allows removeEventListener to unregister the exact handler that was added. + * + * The handler receives the DragEvent and is expected to perform any + * DragManager-specific logic (commonly calling e.preventDefault() to + * allow drop) and return void. + * + * When no global handler is registered this field is null. + * + * @private + */ + private _globalDragOverHandler: ((e: DragEvent) => void) | null = null + + // @ts-expect-error - Will be implemented in visual customization private _dragoverBubble: boolean // @ts-expect-error - Will be implemented in visual customization @@ -86,6 +112,7 @@ export class DragManager implements DragManagerInterface { options?: { enableAccessibility?: boolean multiSelect?: boolean + multiSelectKey?: 'ctrlKey' | 'metaKey' | 'shiftKey' | 'altKey' selectedClass?: string focusClass?: string handle?: string @@ -119,7 +146,7 @@ export class DragManager implements DragManagerInterface { this.groupManager = new GroupManager(groupConfig) // Register this drag manager in the global registry - dragManagerRegistry.set(this.zone.element, this) + DragManager.registry.set(this.zone.element, this) // Initialize accessibility features this.enableAccessibility = options?.enableAccessibility ?? true @@ -131,18 +158,19 @@ export class DragManager implements DragManagerInterface { // Initialize draggable selector and delay options this.draggable = options?.draggable || '.sortable-item' + this.multiSelect = options?.multiSelect ?? false + this.multiSelectKey = options?.multiSelectKey // Set the draggable selector on the drop zone this.zone.setDraggableSelector(this.draggable) this.delay = options?.delay || 0 this.delayOnTouchOnly = options?.delayOnTouchOnly ?? options?.delay ?? 0 this.touchStartThreshold = options?.touchStartThreshold || 5 - // Initialize swap behavior options - // swapThreshold is undefined by default (no threshold checking) - this.swapThreshold = options?.swapThreshold - this.invertSwap = options?.invertSwap ?? false - this.invertedSwapThreshold = options?.invertedSwapThreshold - this.direction = options?.direction ?? 'vertical' + // Initialize swap behavior options - commented out as not used anymore + // this.swapThreshold = options?.swapThreshold + // this.invertSwap = options?.invertSwap ?? false + // this.invertedSwapThreshold = options?.invertedSwapThreshold + // this.direction = options?.direction ?? 'vertical' // Not used anymore // Initialize fallback options (to be fully implemented) this._forceFallback = options?.forceFallback ?? false @@ -192,13 +220,55 @@ export class DragManager implements DragManagerInterface { /** Attach event listeners */ public attach(): void { const el = this.zone.element - // HTML5 drag events - el.addEventListener('dragstart', this.onDragStart) - el.addEventListener('dragover', this.onDragOver) - el.addEventListener('drop', this.onDrop) - el.addEventListener('dragend', this.onDragEnd) - el.addEventListener('dragenter', this.onDragEnter) - el.addEventListener('dragleave', this.onDragLeave) + + // Mark container as a drop zone + el.dataset.dropZone = 'true' + el.dataset.sortableGroup = this.groupManager.getName() + + // Ensure container can receive drag events when empty + // Add a class that ensures the container is a valid drop target + el.classList.add('sortable-drop-zone') + + // Check if container is initially empty and add helper if needed + this.ensureEmptyContainerDropTarget() + + // HTML5 drag events - use bubble phase (false) for better compatibility + // Using capture phase can prevent events from reaching the container properly + el.addEventListener('dragstart', this.onDragStart, false) + el.addEventListener('dragover', this.onDragOver, false) + el.addEventListener('drop', this.onDrop, false) + el.addEventListener('dragend', this.onDragEnd, false) + el.addEventListener('dragenter', this.onDragEnter, false) + el.addEventListener('dragleave', this.onDragLeave, false) + + // Add click handler for multi-select if enabled + if (this._selectionManager && this.multiSelect) { + el.addEventListener('click', this.onItemClick, false) + } + + // Also add a global dragover handler during drags to catch events on empty containers + // This is a workaround for browsers not firing dragover on empty elements + const globalDragOverHandler = (e: DragEvent) => { + // Check if we're over this container + const rect = el.getBoundingClientRect() + const x = e.clientX + const y = e.clientY + + if ( + x >= rect.left && + x <= rect.right && + y >= rect.top && + y <= rect.bottom + ) { + // We're over this container, handle it + // Call preventDefault to allow drops + e.preventDefault() + this.onDragOver(e) + } + } + + // Store the handler so we can remove it later + this._globalDragOverHandler = globalDragOverHandler // Pointer events for modern touch/pen/mouse support el.addEventListener('pointerdown', this.onPointerDown) @@ -209,19 +279,24 @@ export class DragManager implements DragManagerInterface { this.keyboardManager.attach() } - // Setup draggable items based on the draggable selector + // Setup draggable items based on the draggable selec tor this.updateDraggableItems() } /** Detach event listeners */ public detach(): void { const el = this.zone.element - el.removeEventListener('dragstart', this.onDragStart) - el.removeEventListener('dragover', this.onDragOver) - el.removeEventListener('drop', this.onDrop) - el.removeEventListener('dragend', this.onDragEnd) - el.removeEventListener('dragenter', this.onDragEnter) - el.removeEventListener('dragleave', this.onDragLeave) + el.removeEventListener('dragstart', this.onDragStart, false) + el.removeEventListener('dragover', this.onDragOver, false) + el.removeEventListener('drop', this.onDrop, false) + el.removeEventListener('dragend', this.onDragEnd, false) + el.removeEventListener('dragenter', this.onDragEnter, false) + el.removeEventListener('dragleave', this.onDragLeave, false) + + // Remove click handler for multi-select + if (this._selectionManager && this.multiSelect) { + el.removeEventListener('click', this.onItemClick, false) + } // Remove pointer events el.removeEventListener('pointerdown', this.onPointerDown) @@ -231,6 +306,9 @@ export class DragManager implements DragManagerInterface { this.cancelDragDelay() document.removeEventListener('pointermove', this.onPointerMoveBeforeDrag) + // Remove any empty container helper + this.removeEmptyContainerHelper() + // Detach accessibility features if (this.enableAccessibility) { this.keyboardManager.detach() @@ -238,7 +316,68 @@ export class DragManager implements DragManagerInterface { } // Unregister from global registry - dragManagerRegistry.delete(this.zone.element) + DragManager.registry.delete(this.zone.element) + } + + private onItemClick = (e: MouseEvent): void => { + // Only handle clicks on sortable items + const target = e.target as HTMLElement + const item = target.closest(this.draggable) + + if (!item || !this.zone.element.contains(item)) return + + // Stop propagation to prevent parent handlers + e.stopPropagation() + + // Check for modifier keys + const isShiftSelect = e.shiftKey + + // If no multiSelectKey is specified, allow plain clicks to toggle + if (!this.multiSelectKey) { + e.preventDefault() + if (isShiftSelect && this._selectionManager.getLastSelected()) { + // Shift+click: select range + this._selectionManager.selectRange( + this._selectionManager.getLastSelected()!, + item as HTMLElement + ) + } else { + // Plain click: toggle selection + this._selectionManager.toggle(item as HTMLElement) + } + } else { + // A modifier key is required + const multiSelectKey = this.multiSelectKey + const isMultiSelect = e[multiSelectKey as keyof MouseEvent] as boolean + + if (isShiftSelect && this._selectionManager.getLastSelected()) { + // Shift+click: select range + e.preventDefault() + this._selectionManager.selectRange( + this._selectionManager.getLastSelected()!, + item as HTMLElement + ) + } else if (isMultiSelect) { + // Modifier+click: toggle selection + e.preventDefault() + this._selectionManager.toggle(item as HTMLElement) + } else { + // Regular click without modifier: do nothing (allow normal behavior) + return + } + } + + // Update visual state of the item + this.updateItemSelectionState(item as HTMLElement) + } + + private updateItemSelectionState(item: HTMLElement): void { + // Update data attribute for CSS styling + if (this._selectionManager.isSelected(item)) { + item.setAttribute('data-selected', 'true') + } else { + item.removeAttribute('data-selected') + } } private onDragStart = (e: DragEvent): void => { @@ -258,11 +397,40 @@ export class DragManager implements DragManagerInterface { // Check if drag should be allowed based on handle/filter options if (!this.shouldAllowDrag(e, target)) { e.preventDefault() + // Clear the saved mouse down target since drag is not allowed + this.originalMouseDownTarget = null return } this.startIndex = this.zone.getIndex(target) + // Get selected items if multiSelect is enabled + if (this._selectionManager.isSelected(target)) { + // If the target is already selected, drag all selected items + this.draggedItems = this._selectionManager.getSelected() + } else { + // If target is not selected, select only it + this._selectionManager.select(target) + this.draggedItems = [target] + } + + // For HTML5 drag API, we need to set the data FIRST + if (e.dataTransfer) { + // Set drag data - MUST have a value for Firefox + e.dataTransfer.setData('text/plain', 'sortable-item') + e.dataTransfer.effectAllowed = 'move' + } + + // NEVER modify DOM during dragstart to avoid Chrome bug + // The global dragover handler must ALWAYS be added for cross-container to work + // We'll defer markEmptyContainers to the first dragover event for ALL elements + + // ALWAYS add global dragover handler - this is needed for cross-container drag + // This doesn't modify DOM directly, just adds an event listener + if (this._globalDragOverHandler) { + document.addEventListener('dragover', this._globalDragOverHandler, true) + } + // Register with global drag state using HTML5 drag API as ID const dragId = 'html5-drag' globalDragState.startDrag( @@ -277,7 +445,7 @@ export class DragManager implements DragManagerInterface { const evt: SortableEvent = { item: target, - items: [target], + items: this.draggedItems, from: this.zone.element, to: this.zone.element, oldIndex: this.startIndex, @@ -286,72 +454,77 @@ export class DragManager implements DragManagerInterface { // Emit choose event first this.events.emit('choose', evt) - // Create ghost element (but for HTML5 drag, we'll use it as a placeholder) - // The actual dragging visual is handled by the browser - const placeholder = this.ghostManager.createPlaceholder(target) - // Insert placeholder where the item was - target.parentElement?.insertBefore(placeholder, target) - - // Apply chosen class to the dragged element - target.classList.add(this.ghostManager.getChosenClass()) - const ghost = this.ghostManager.createGhost(target, e) - - // For HTML5 drag API, we can optionally set the drag image - if (e.dataTransfer && ghost) { - // Hide the ghost since browser will show its own drag image - ghost.style.display = 'none' - // Set drag data - e.dataTransfer.setData('text/plain', '') - e.dataTransfer.effectAllowed = 'move' - // Apply drag class to the original element - target.classList.add(this.ghostManager.getDragClass()) + // Now handle visual feedback + if (e.dataTransfer) { + // Don't modify classes during dragstart to avoid Chrome bug + // Visual feedback will be applied in onDragOver + // For HTML5 drag, DON'T create a placeholder yet - it will be created on first dragover + // The browser needs the original element to stay in place for the drag to work + // We'll create the placeholder when we first detect movement + } else { + // For non-HTML5 drag (shouldn't happen with mouse), create ghost and placeholder + const placeholder = this.ghostManager.createPlaceholder(target) + target.parentElement?.insertBefore(placeholder, target) + const ghost = this.ghostManager.createGhost(target, e) + if (ghost) { + ghost.style.display = 'none' + } } // Then emit start event this.events.emit('start', evt) } - /** - * Calculate if swap should occur based on overlap (only if threshold is set) - */ - private shouldSwap( - dragRect: DOMRect, - targetRect: DOMRect, - _dragDirection: 'forward' | 'backward' - ): boolean { - // If no threshold is set, always allow swap (legacy behavior) - if (this.swapThreshold === undefined) { - return true - } - - // Calculate overlap percentage based on direction - let overlap: number - if (this.direction === 'vertical') { - const overlapHeight = - Math.min(dragRect.bottom, targetRect.bottom) - - Math.max(dragRect.top, targetRect.top) - overlap = Math.max(0, overlapHeight) / targetRect.height - } else { - const overlapWidth = - Math.min(dragRect.right, targetRect.right) - - Math.max(dragRect.left, targetRect.left) - overlap = Math.max(0, overlapWidth) / targetRect.width - } - - // Apply swap threshold logic - let threshold = this.swapThreshold - if (this.invertSwap) { - // In inverted mode, swap occurs when overlap is less than the threshold - threshold = this.invertedSwapThreshold ?? this.swapThreshold - return overlap < threshold - } - - // Normal mode: swap when overlap exceeds threshold - return overlap >= threshold - } + // /** + // * Calculate if swap should occur based on overlap (only if threshold is set) + // */ + // private shouldSwap( + // dragRect: DOMRect, + // targetRect: DOMRect, + // _dragDirection: 'forward' | 'backward' + // ): boolean { + // // If no threshold is set, always allow swap (legacy behavior) + // if (this.swapThreshold === undefined) { + // return true + // } + + // // Calculate overlap percentage based on direction + // let overlap: number + // if (this.direction === 'vertical') { + // const overlapHeight = + // Math.min(dragRect.bottom, targetRect.bottom) - + // Math.max(dragRect.top, targetRect.top) + // overlap = Math.max(0, overlapHeight) / targetRect.height + // } else { + // const overlapWidth = + // Math.min(dragRect.right, targetRect.right) - + // Math.max(dragRect.left, targetRect.left) + // overlap = Math.max(0, overlapWidth) / targetRect.width + // } + + // // Apply swap threshold logic + // let threshold = this.swapThreshold + // if (this.invertSwap) { + // // In inverted mode, swap occurs when overlap is less than the threshold + // threshold = this.invertedSwapThreshold ?? this.swapThreshold + // return overlap < threshold + // } + + // // Normal mode: swap when overlap exceeds threshold + // return overlap >= threshold + // } private onDragOver = (e: DragEvent): void => { + // IMPORTANT: We must ALWAYS call preventDefault() on dragover to allow drops + // This must happen before any other checks according to the HTML5 drag/drop spec e.preventDefault() + e.stopPropagation() + + // CRITICAL: Set dropEffect to indicate this is a valid drop target + // This MUST be set in dragover for the drop to work properly + if (e.dataTransfer) { + e.dataTransfer.dropEffect = 'move' + } // Check if we can accept the current drag (HTML5 drag events don't have pointer IDs) const dragId = 'html5-drag' @@ -360,7 +533,9 @@ export class DragManager implements DragManagerInterface { } const activeDrag = globalDragState.getActiveDrag(dragId) - if (!activeDrag) return + if (!activeDrag) { + return + } // Ensure put target is set for cross-zone operations (in case onDragEnter wasn't called) const isDifferentZone = activeDrag.item.parentElement !== this.zone.element @@ -374,17 +549,88 @@ export class DragManager implements DragManagerInterface { } const originalItem = activeDrag.item - // Determine which item to use for positioning (original or clone) - let dragItem = originalItem - if ( - activeDrag.pullMode === 'clone' && - activeDrag.clone && - activeDrag.clone.parentElement === this.zone.element - ) { - dragItem = activeDrag.clone + + // Handle deferred empty container marking on first dragover + // This is done for ALL elements to avoid the Chrome bug where DOM modifications + // during dragstart cause immediate dragend + if (!originalItem.dataset.deferredSetupDone) { + // Mark that we've done the deferred setup + originalItem.dataset.deferredSetupDone = 'true' + + // Now it's safe to mark empty containers (drag is established) + this.markEmptyContainers() + + // Note: global dragover handler is already added in onDragStart for all cases + } + + // For HTML5 drag, we don't use a placeholder anymore + // Just ensure the item is semi-transparent + if (!originalItem.style.opacity) { + originalItem.style.opacity = '0.5' + + // Add visual feedback classes that were deferred from dragstart + if ( + !originalItem.classList.contains(this.ghostManager.getChosenClass()) + ) { + originalItem.classList.add(this.ghostManager.getChosenClass()) + } + if (!originalItem.classList.contains(this.ghostManager.getDragClass())) { + originalItem.classList.add(this.ghostManager.getDragClass()) + } + + // Note: Setting pointerEvents='none' here can cause issues with inline-block elements + // where the drag ends immediately. The browser needs the element to remain interactive. + // originalItem.style.pointerEvents = 'none' + } + + // Get the actual event target element + const eventTarget = e.target as HTMLElement + const over = eventTarget.closest(this.draggable) + + // Check if we're over the container itself (not a draggable item) + const isOverContainer = + eventTarget === this.zone.element || + (this.zone.element.contains(eventTarget) && !over) + + // Check if container is truly empty (no draggable children) + const draggableChildren = Array.from(this.zone.element.children).filter( + (child) => + child.matches(this.draggable) && + child !== originalItem && + child !== activeDrag.clone && + !child.classList.contains('sortable-empty-drop-helper') && + !child.classList.contains('sortable-ghost') + ) + + // Handle empty container or dragging over empty space in container + if (isOverContainer && draggableChildren.length === 0) { + // Container is empty - move item here if not already + if (originalItem.parentElement !== this.zone.element) { + // For cross-container, we need to append directly (can't use zone.move for items not in zone) + this.zone.element.appendChild(originalItem) + // TODO: Add animation for cross-container moves + // Add visual indication for empty container + this.zone.element.classList.add('sortable-empty-drop-zone') + } + + // Mark that we're over an empty container for the drop handler + this.zone.element.dataset.dragOverEmpty = 'true' + return + } else { + // Clear the empty markers if not empty + delete this.zone.element.dataset.dragOverEmpty + this.zone.element.classList.remove('sortable-empty-drop-zone') } - const over = (e.target as HTMLElement).closest(this.draggable) + // Use placeholder for positioning calculations instead of the hidden original item + // let dragItem = placeholder || originalItem // Not needed anymore + // if ( + // activeDrag.pullMode === 'clone' && + // activeDrag.clone && + // activeDrag.clone.parentElement === this.zone.element + // ) { + // dragItem = activeDrag.clone + // } // Handle cross-zone dragging if (originalItem.parentElement !== this.zone.element) { @@ -393,217 +639,224 @@ export class DragManager implements DragManagerInterface { if (activeDrag.pullMode === 'clone' && activeDrag.clone) { // Use the clone for display in the target zone itemToInsert = activeDrag.clone - dragItem = itemToInsert // Update reference for subsequent operations + // dragItem = itemToInsert // Update reference for subsequent operations - not needed anymore } // Move item (or clone) to this zone if not already here if (itemToInsert.parentElement !== this.zone.element) { this.zone.element.appendChild(itemToInsert) + // Remove helper since container is no longer empty + this.removeEmptyContainerHelper() } } - // Update placeholder position - if (over instanceof HTMLElement && over !== dragItem) { - const placeholder = this.ghostManager.getPlaceholderElement() - if (placeholder) { - // Insert placeholder at the potential drop position - const overIndex = this.zone.getIndex(over) - const dragIndex = this.zone.getIndex(dragItem) - if (dragIndex < overIndex) { - // Dragging down - insert after - over.parentElement?.insertBefore(placeholder, over.nextSibling) - } else { - // Dragging up - insert before - over.parentElement?.insertBefore(placeholder, over) - } - } - } - + // Update item position if we're over a different item if ( - !(over instanceof HTMLElement) || - over === dragItem || - over.parentElement !== this.zone.element + over instanceof HTMLElement && + over !== originalItem && + !over.classList.contains('sortable-ghost') ) { - return - } - - const overIndex = this.zone.getIndex(over) - const dragIndex = this.zone.getIndex(dragItem) - if (overIndex === dragIndex) return + if (originalItem.parentElement === this.zone.element) { + // Get current positions + const overRect = over.getBoundingClientRect() + const items = this.zone.getItems() + const currentIndex = items.indexOf(originalItem) + const overIndex = items.indexOf(over) + + // Determine if we should move the item based on mouse position + // Check if it's a horizontal or vertical list based on element positions + const originalRect = originalItem.getBoundingClientRect() + const isHorizontal = Math.abs(originalRect.top - overRect.top) < 10 + + let targetIndex: number + + if (isHorizontal) { + // Horizontal list - use X coordinates + const mouseX = e.clientX + const overMidpoint = overRect.left + overRect.width / 2 + + if (mouseX < overMidpoint) { + // Mouse is in left half - insert before + targetIndex = overIndex + } else { + // Mouse is in right half - insert after + targetIndex = overIndex + 1 + } + } else { + // Vertical list - use Y coordinates + const mouseY = e.clientY + const overMidpoint = overRect.top + overRect.height / 2 - // Check swap threshold if configured - const dragRect = dragItem.getBoundingClientRect() - const targetRect = over.getBoundingClientRect() - const dragDirection = dragIndex < overIndex ? 'forward' : 'backward' + if (mouseY < overMidpoint) { + // Mouse is in upper half - insert before + targetIndex = overIndex + } else { + // Mouse is in lower half - insert after + targetIndex = overIndex + 1 + } + } - if (!this.shouldSwap(dragRect, targetRect, dragDirection)) { - return // Don't swap if threshold not met - } + // Adjust target index if moving from before to after the same position + if (currentIndex < targetIndex) { + targetIndex-- + } - // Create MoveEvent for onMove callback (always use original item for events) - const moveEvent: import('../types/index.js').MoveEvent = { - item: originalItem, - items: [originalItem], - from: this.zone.element, - to: this.zone.element, - oldIndex: dragIndex, - newIndex: overIndex, - related: over, - willInsertAfter: dragIndex < overIndex, - draggedRect: dragRect, - targetRect, - } - - // Fire onMove event - this.events.emit('move', moveEvent) - - // Determine the correct insertion index based on drag direction - // We want to insert the dragged item before the item we're hovering over - let targetIndex = overIndex - if (dragIndex < overIndex) { - // Dragging downwards: insert at the position that will be before the target - // After removing the dragged item, target shifts down by 1, so we insert at overIndex - 1 - targetIndex = overIndex - 1 - } else { - // Dragging upwards: insert before the target (overIndex stays the same) - targetIndex = overIndex - } - - // During drag, just move the placeholder, not the actual item - // The actual move will happen on drop - const placeholder = this.ghostManager.getPlaceholderElement() - if (placeholder && placeholder.parentElement) { - // Move the placeholder to show where the item will drop - const targetElement = this.zone.getItems()[targetIndex] - if (targetElement && targetElement !== placeholder) { - if (dragIndex < overIndex) { - // Moving down - insert after target - targetElement.parentElement?.insertBefore( - placeholder, - targetElement.nextSibling - ) - } else { - // Moving up - insert before target - targetElement.parentElement?.insertBefore(placeholder, targetElement) + // Use DropZone's move method to handle animation + if (currentIndex !== targetIndex) { + this.zone.move(originalItem, targetIndex) } } } - // Don't actually move the item yet, just track where it should go - // this.zone.move(dragItem, targetIndex) // Commented out - will do on drop - - // Emit sort event (always fired when sorting changes) - use original item for events - this.events.emit('sort', { - item: originalItem, - items: [originalItem], - from: this.zone.element, - to: this.zone.element, - oldIndex: dragIndex, - newIndex: overIndex, - }) - - // Only emit update if it's within the same zone originally - if (activeDrag.fromZone === this.zone.element) { - this.events.emit('update', { + // Emit move event if we're over an item + if (over instanceof HTMLElement && over !== originalItem) { + const moveEvent: import('../types/index.js').MoveEvent = { item: originalItem, items: [originalItem], from: this.zone.element, to: this.zone.element, - oldIndex: dragIndex, - newIndex: overIndex, - }) + oldIndex: activeDrag.startIndex, + newIndex: this.zone.getIndex(over), + related: over, + willInsertAfter: false, + draggedRect: originalItem.getBoundingClientRect(), + targetRect: over.getBoundingClientRect(), + } + this.events.emit('move', moveEvent) + } - // Emit change event when order changes within same list - this.events.emit('change', { - item: originalItem, - items: [originalItem], - from: this.zone.element, - to: this.zone.element, - oldIndex: dragIndex, - newIndex: overIndex, - }) + // Emit sort event when dragging within same container + if (activeDrag.fromZone === this.zone.element) { + const currentIndex = this.zone.getIndex(originalItem) + if (currentIndex >= 0 && currentIndex !== activeDrag.startIndex) { + this.events.emit('sort', { + item: originalItem, + items: [originalItem], + from: this.zone.element, + to: this.zone.element, + oldIndex: activeDrag.startIndex, + newIndex: currentIndex, + }) + } } } private onDrop = (e: DragEvent): void => { e.preventDefault() + e.stopPropagation() const dragId = 'html5-drag' const activeDrag = globalDragState.getActiveDrag(dragId) - if (!activeDrag) return + if (!activeDrag) { + return + } const originalItem = activeDrag.item - const placeholder = this.ghostManager.getPlaceholderElement() - - if (placeholder && placeholder.parentElement === this.zone.element) { - // Get the target index based on placeholder position - const items = this.zone.getItems() - const placeholderIndex = Array.from(this.zone.element.children).indexOf( - placeholder - ) - - // Remove the placeholder - placeholder.remove() - // Determine which item to use (original or clone) - let itemToPlace = originalItem - const isDifferentZone = originalItem.parentElement !== this.zone.element + // Clear empty container styling + this.zone.element.classList.remove('sortable-empty-drop-zone') + + // Check if drop is on this container using multiple methods: + // 1. Direct containment check + // 2. Coordinate-based check for empty containers + // 3. Check if we marked this container during dragover + const isDropOnThisContainer = + this.zone.element.contains(e.target as Node) || + this.zone.element === e.target || + this.zone.element.dataset.dragOverEmpty === 'true' || + this.isDropWithinBounds(e) + + // Handle drop in this container + if (isDropOnThisContainer) { + // Clear the empty marker + delete this.zone.element.dataset.dragOverEmpty + this.zone.element.classList.remove('sortable-empty-drop-zone') + + // The item is already in the correct position from the dragover events + // Just handle clone mode if needed + const isDifferentZone = activeDrag.fromZone !== this.zone.element if ( isDifferentZone && activeDrag.pullMode === 'clone' && activeDrag.clone ) { - // For cross-zone clone operations, use the clone - itemToPlace = activeDrag.clone - } - - // Now calculate where to insert the item - const currentIndex = items.indexOf(itemToPlace) - let targetIndex = 0 - - // Count how many draggable items come before the placeholder position - const children = Array.from(this.zone.element.children) - for (let i = 0; i < placeholderIndex && i < children.length; i++) { - if ( - children[i].matches(this.draggable) && - children[i] !== itemToPlace - ) { - targetIndex++ + // For cross-zone clone operations, replace original with clone + const currentIndex = this.zone.getIndex(originalItem) + if (currentIndex >= 0) { + this.zone.element.replaceChild(activeDrag.clone, originalItem) + // Put original back in source container + activeDrag.fromZone.appendChild(originalItem) } } - // Perform the actual placement with animation - if (currentIndex !== targetIndex || itemToPlace !== originalItem) { - // For clone operations, we need to handle positioning differently - if (itemToPlace === activeDrag.clone) { - // For clones, use the zone's move method to position correctly - if (currentIndex !== targetIndex) { - this.zone.move(itemToPlace, targetIndex) - } - } else if (currentIndex !== targetIndex) { - // Move existing item to new position - this.zone.move(itemToPlace, targetIndex) - } + // Remove any empty container helper if needed + const items = this.zone.getItems() + if (items.length > 0) { + this.removeEmptyContainerHelper() } } } private onDragEnd = (): void => { + // Clear the saved mouse down target + this.originalMouseDownTarget = null + + // Clear multi-drag state + this.draggedItems = [] + // Global drag state handles the end event and cleanup const dragId = 'html5-drag' const activeDrag = globalDragState.getActiveDrag(dragId) - // Clean up ghost elements + // Clean up ghost elements and restore visibility if (activeDrag) { + // Restore all styles + activeDrag.item.style.opacity = '' + activeDrag.item.style.display = '' + activeDrag.item.style.visibility = '' + activeDrag.item.style.pointerEvents = '' + + // Clean up deferred setup marker + delete activeDrag.item.dataset.deferredSetupDone + + // Remove drag-related classes + activeDrag.item.classList.remove(this.ghostManager.getDragClass()) + activeDrag.item.classList.remove(this.ghostManager.getChosenClass()) + + // Clean up any remaining ghost elements this.ghostManager.destroy(activeDrag.item) } + // Clean up empty container markers + this.unmarkEmptyContainers() + + // Clear any empty zone styling from all containers + document.querySelectorAll('.sortable-empty-drop-zone').forEach((el) => { + el.classList.remove('sortable-empty-drop-zone') + }) + + // Remove global dragover handler + if (this._globalDragOverHandler) { + document.removeEventListener( + 'dragover', + this._globalDragOverHandler, + true + ) + } + + // Check if our container is now empty and needs helper + this.ensureEmptyContainerDropTarget() + globalDragState.endDrag(dragId) this.startIndex = -1 } private onDragEnter = (e: DragEvent): void => { e.preventDefault() + // Set dropEffect to indicate this is a valid drop target + if (e.dataTransfer) { + e.dataTransfer.dropEffect = 'move' + } const dragId = 'html5-drag' if (globalDragState.canAcceptDrop(dragId, this.groupManager.getName())) { globalDragState.setPutTarget( @@ -625,6 +878,15 @@ export class DragManager implements DragManagerInterface { // Pointer-based drag and drop for modern touch/pen/mouse support private onPointerDown = (e: PointerEvent): void => { + // CRITICAL: For mouse events, let the native HTML5 drag API handle it + // Only use pointer-based dragging for touch events + if (e.pointerType === 'mouse') { + // For mouse, save the original target for handle checking in onDragStart + this.originalMouseDownTarget = e.target as HTMLElement + // Don't interfere with native HTML5 drag for mouse + return + } + // Find the closest draggable item const draggableSelector = this.draggable || '.sortable-item' const target = (e.target as HTMLElement)?.closest( @@ -718,13 +980,13 @@ export class DragManager implements DragManagerInterface { document.removeEventListener('pointermove', this.onPointerMoveBeforeDrag) // Get selected items if multiSelect is enabled - let draggedItems: HTMLElement[] = [target] if (this._selectionManager.isSelected(target)) { // If the target is already selected, drag all selected items - draggedItems = this._selectionManager.getSelected() + this.draggedItems = this._selectionManager.getSelected() } else { // If target is not selected, select only it this._selectionManager.select(target) + this.draggedItems = [target] } // Capture the pointer to ensure we receive all subsequent events @@ -758,7 +1020,7 @@ export class DragManager implements DragManagerInterface { const evt: SortableEvent = { item: target, - items: draggedItems, + items: this.draggedItems, from: this.zone.element, to: this.zone.element, oldIndex: this.startIndex, @@ -796,11 +1058,50 @@ export class DragManager implements DragManagerInterface { if (!activeDrag) return // Find the element under the mouse cursor + // IMPORTANT: We need to temporarily hide the dragged element and ghost to get accurate hit testing + const draggedElementPointerEvents = this.dragElement.style.pointerEvents + const ghostElement = this.ghostManager.getGhostElement() + const ghostPointerEvents = ghostElement?.style.pointerEvents + + // Temporarily disable pointer events on dragged element and ghost + this.dragElement.style.pointerEvents = 'none' + if (ghostElement) { + ghostElement.style.pointerEvents = 'none' + } + const elementUnderMouse = document.elementFromPoint(e.clientX, e.clientY) + + // Restore pointer events + this.dragElement.style.pointerEvents = draggedElementPointerEvents + if (ghostElement) { + ghostElement.style.pointerEvents = ghostPointerEvents || 'none' + } + const over = elementUnderMouse?.closest(this.draggable) as HTMLElement if (!over) return + // Skip if we're hovering over the dragged element itself or the placeholder + if ( + over === this.dragElement || + over === this.ghostManager.getPlaceholderElement() + ) { + return + } + + // Debounce move operations to prevent jumpiness from animations + const now = Date.now() + const timeSinceLastMove = now - this.lastMoveTime + const MOVE_THROTTLE_MS = 100 // Minimum time between moves + + // Skip if we're still hovering over the same element and not enough time has passed + if ( + over === this.lastHoveredElement && + timeSinceLastMove < MOVE_THROTTLE_MS + ) { + return + } + // Find which zone the element we're hovering over belongs to const targetZoneElement = over.parentElement if (!targetZoneElement) return @@ -855,6 +1156,10 @@ export class DragManager implements DragManagerInterface { // Use the DropZone's move method to get animations this.zone.move(this.dragElement, targetIndex) + // Update tracking variables + this.lastHoveredElement = over + this.lastMoveTime = Date.now() + // Only emit update if it's within the original zone if (activeDrag.fromZone === targetZoneElement) { this.events.emit('update', { @@ -948,11 +1253,13 @@ export class DragManager implements DragManagerInterface { this.isPointerDragging = false this.activePointerId = null this.dragElement = null + this.lastHoveredElement = null + this.lastMoveTime = 0 } /** Find the DragManager instance that manages a specific zone */ private findDragManagerForZone(targetZone: HTMLElement): DragManager | null { - return dragManagerRegistry.get(targetZone) || null + return DragManager.registry.get(targetZone) || null } /** Get the selection manager for this drag manager */ @@ -1054,7 +1361,12 @@ export class DragManager implements DragManagerInterface { * @returns true if drag should be allowed, false otherwise */ private shouldAllowDrag(event: Event, dragTarget: HTMLElement): boolean { - const eventTarget = event.target as HTMLElement + // For HTML5 drag (mouse), use the saved originalMouseDownTarget if available + // This is because dragstart event.target is always the draggable element, not what was clicked + const eventTarget = + event.type === 'dragstart' && this.originalMouseDownTarget + ? this.originalMouseDownTarget + : (event.target as HTMLElement) // Check filter option - if event target matches filter, prevent drag if (this.filter && eventTarget.matches(this.filter)) { @@ -1097,24 +1409,28 @@ export class DragManager implements DragManagerInterface { * Update which items are draggable based on the draggable selector */ private updateDraggableItems(): void { - // Update draggable attribute based on selector - const draggableItems = this.zone.element.querySelectorAll(this.draggable) - for (const item of draggableItems) { - if ( - item instanceof HTMLElement && - item.parentElement === this.zone.element - ) { - // Set draggable=true for HTML5 drag API - // When using handle, we still need draggable=true for HTML5 drag, - // the handle check happens in onDragStart - item.draggable = true - } - } + // Only update draggable attribute for direct children of THIS container + // Don't touch items in other containers + const children = Array.from(this.zone.element.children) + + for (const child of children) { + if (child instanceof HTMLElement) { + // Skip helper elements + if (child.classList.contains('sortable-empty-drop-helper')) { + continue + } - // Set draggable=false for items that don't match the selector - for (const child of this.zone.getItems()) { - if (!child.matches(this.draggable)) { - child.draggable = false + // Set draggable based on whether it matches the selector + + if (child.matches(this.draggable)) { + // Set draggable=true for HTML5 drag API + // When using handle, we still need draggable=true for HTML5 drag, + // the handle check happens in onDragStart + child.draggable = true + } else { + // Not a draggable item (might be a header or other content) + child.draggable = false + } } } } @@ -1193,4 +1509,154 @@ export class DragManager implements DragManagerInterface { } this.dragStartPosition = undefined } + + /** + * Mark all empty containers that can accept drops + */ + private markEmptyContainers(): void { + // Find all sortable containers + const allContainers = document.querySelectorAll('[data-drop-zone="true"]') + allContainers.forEach((container) => { + if (container instanceof HTMLElement) { + // Check if this container can accept drops from our group + const containerGroup = container.dataset.sortableGroup + if (!containerGroup) return + + // Check if container is empty + const draggableItems = container.querySelectorAll(this.draggable) + if (draggableItems.length === 0) { + container.dataset.sortableEmpty = 'true' + + // Add a temporary invisible placeholder to ensure drag events fire + // This is needed because browsers don't always fire dragover on truly empty elements + if (!container.querySelector('.sortable-empty-drop-helper')) { + const helper = document.createElement('div') + helper.className = 'sortable-empty-drop-helper' + // Make it draggable=false and style it to catch events + helper.draggable = false + // Use a very faint background color instead of transparent + // This ensures the browser sees it as a real element + helper.style.cssText = + 'min-height: 80px; width: 100%; background: rgba(0,0,0,0.001); pointer-events: auto; user-select: none;' + helper.setAttribute('aria-hidden', 'true') + // Add actual content to ensure the browser sees it as a valid drop target + helper.innerHTML = + 'Drop zone' + container.appendChild(helper) + } + container.classList.add('sortable-empty-drop-zone') + } + } + }) + } + + /** + * Remove empty container markers + */ + private unmarkEmptyContainers(): void { + const markedContainers = document.querySelectorAll( + '[data-sortable-empty="true"]' + ) + markedContainers.forEach((container) => { + if (container instanceof HTMLElement) { + delete container.dataset.sortableEmpty + delete container.dataset.dragOverEmpty + container.classList.remove('sortable-empty-drop-zone') + + // Remove the helper element + const helper = container.querySelector('.sortable-empty-drop-helper') + if (helper) { + helper.remove() + } + } + }) + } + + /** + * Ensure empty containers have a drop target for HTML5 drag events + */ + private ensureEmptyContainerDropTarget(): void { + const el = this.zone.element + + // Check if container is empty (no draggable children) + const draggableItems = el.querySelectorAll(this.draggable) + if (draggableItems.length === 0) { + // Add a helper element to ensure drag events fire + if (!el.querySelector('.sortable-empty-drop-helper')) { + const helper = document.createElement('div') + helper.className = 'sortable-empty-drop-helper' + helper.draggable = false + + // CRITICAL: Use a non-zero alpha background color to ensure browser treats it as content + // Fully transparent elements don't receive drag events in some browsers + helper.style.cssText = + 'min-height: 60px; width: 100%; background: rgba(0,0,0,0.01); pointer-events: auto; user-select: none; position: relative;' + helper.setAttribute('aria-hidden', 'true') + + // Add actual text content (not just hidden) to ensure it's a valid drop target + // Use transparent color instead of visibility:hidden + helper.innerHTML = + 'Drop zone' + + // Add dragover event listener directly to helper to ensure it receives events + helper.addEventListener( + 'dragover', + (e) => { + e.preventDefault() + e.stopPropagation() + // Set dropEffect to indicate this is a valid drop target + if (e.dataTransfer) { + e.dataTransfer.dropEffect = 'move' + } + // Forward the event to the container's handler + this.onDragOver(e) + }, + true + ) + + helper.addEventListener( + 'drop', + (e) => { + e.preventDefault() + e.stopPropagation() + // Forward the event to the container's handler + this.onDrop(e) + }, + true + ) + + el.appendChild(helper) + } + } + } + + /** + * Remove the empty container drop helper if it exists + */ + private removeEmptyContainerHelper(): void { + const helper = this.zone.element.querySelector( + '.sortable-empty-drop-helper' + ) + if (helper) { + // Remove all event listeners before removing the element + helper.replaceWith(helper.cloneNode(true)) + const newHelper = this.zone.element.querySelector( + '.sortable-empty-drop-helper' + ) + newHelper?.remove() + } + } + + /** + * Check if a drop event occurred within this container's bounds + */ + private isDropWithinBounds(e: DragEvent): boolean { + const rect = this.zone.element.getBoundingClientRect() + return ( + e.clientX >= rect.left && + e.clientX <= rect.right && + e.clientY >= rect.top && + e.clientY <= rect.bottom + ) + } } diff --git a/src/core/DropZone.ts b/src/core/DropZone.ts index b467708..7853bee 100644 --- a/src/core/DropZone.ts +++ b/src/core/DropZone.ts @@ -83,13 +83,63 @@ export class DropZone { // Get all sortable items that might be affected by this move const affectedItems = this.getItems() + // Temporarily disable pointer events on the moving item to prevent interference + const originalPointerEvents = item.style.pointerEvents + item.style.pointerEvents = 'none' + // Use FLIP animation for smooth reordering this.animationManager.animateReorder(affectedItems, () => { insertAt(this.element, item, targetDOMIndex) }) + + // Restore pointer events after animation starts + // Using requestAnimationFrame to ensure it happens after the animation begins + window.requestAnimationFrame(() => { + item.style.pointerEvents = originalPointerEvents + }) } else { // No animation, just do the move insertAt(this.element, item, targetDOMIndex) } } + + /** + * Reorder multiple items at once with a single FLIP animation + * @param newOrder - Array of elements in their desired new order + */ + public reorderAll(newOrder: HTMLElement[]): void { + const currentItems = this.getItems() + + // Validate that all items are present + if (newOrder.length !== currentItems.length) { + console.warn( + 'reorderAll: new order has different length than current items' + ) + return + } + + // Check if all items are accounted for + const newOrderSet = new Set(newOrder) + const currentSet = new Set(currentItems) + if (newOrderSet.size !== currentSet.size) { + console.warn('reorderAll: new order contains duplicate or missing items') + return + } + + // If we have an animation manager, animate the entire reordering at once + if (this.animationManager) { + // Use FLIP animation for smooth reordering of all items + this.animationManager.animateReorder(currentItems, () => { + // Append all items in the new order + newOrder.forEach((item) => { + this.element.appendChild(item) + }) + }) + } else { + // No animation, just reorder + newOrder.forEach((item) => { + this.element.appendChild(item) + }) + } + } } diff --git a/src/core/GhostManager.ts b/src/core/GhostManager.ts index 905cbcd..92d8186 100644 --- a/src/core/GhostManager.ts +++ b/src/core/GhostManager.ts @@ -214,6 +214,10 @@ export class GhostManager { /** * Gets the current ghost element */ + /** + * Get the ghost element if it exists + * @returns The ghost element or null + */ getGhostElement(): HTMLElement | null { return this.ghostElement } diff --git a/src/core/GroupManager.ts b/src/core/GroupManager.ts index f7c5477..99ece15 100644 --- a/src/core/GroupManager.ts +++ b/src/core/GroupManager.ts @@ -65,7 +65,8 @@ export class GroupManager { if (pull === false) return false if (pull === true || pull === 'clone') return true - // For simple string groups (pull === undefined), only allow same group + // For simple string groups (pull === undefined), allow pulling to the same group name + // This enables cross-container drag between containers with the same group if (pull === undefined) { return targetGroupName === this.name } diff --git a/src/index.ts b/src/index.ts index 1766cd3..a806bc9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -44,9 +44,6 @@ import { toArray as domToArray } from './utils/dom.js' // Export PluginSystem export { PluginSystem } -// WeakMap to track Sortable instances by their elements -const sortableInstances = new WeakMap() - /** * @beta * Main Sortable class for creating drag-and-drop sortable lists @@ -74,6 +71,12 @@ const sortableInstances = new WeakMap() * @public */ export class Sortable { + /** + * WeakMap to track Sortable instances by their elements + * @internal + */ + private static instances = new WeakMap() + /** * The currently active Sortable instance (if any drag is in progress) * @readonly @@ -123,8 +126,7 @@ export class Sortable { } // Check if current element has a Sortable instance - // We'll need to track instances in a WeakMap - const sortable = sortableInstances.get(current) + const sortable = Sortable.instances.get(current) if (sortable) { return sortable } @@ -184,7 +186,7 @@ export class Sortable { this.options = { ...defaultOptions, ...options } // Track this instance - sortableInstances.set(element, this) + Sortable.instances.set(element, this) // Create animation manager first this.animationManager = new AnimationManager({ @@ -202,6 +204,7 @@ export class Sortable { { enableAccessibility: this.options.enableAccessibility, multiSelect: this.options.multiDrag, + multiSelectKey: this.options.multiSelectKey, selectedClass: this.options.selectedClass, focusClass: this.options.focusClass, handle: this.options.handle, @@ -303,7 +306,7 @@ export class Sortable { this.dragManager.detach() // Remove from instance tracking - sortableInstances.delete(this.element) + Sortable.instances.delete(this.element) } /** @@ -581,3 +584,13 @@ const defaultOptions: SortableOptions = { selectedClass: 'sortable-selected', focusClass: 'sortable-focused', } + +// Default export for compatibility +export default Sortable + +// TEMPORARY: Expose globalDragState for debugging +import { globalDragState } from './core/GlobalDragState.js' +if (typeof window !== 'undefined') { + // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access + ;(window as any).__globalDragState = globalDragState +} diff --git a/src/types/index.ts b/src/types/index.ts index 7d5850e..ebcb31d 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -120,6 +120,12 @@ export interface SortableOptions { */ multiDrag?: boolean + /** + * Key to use for multi-select (with click) + * @defaultValue 'ctrlKey' (or 'metaKey' on Mac) + */ + multiSelectKey?: 'ctrlKey' | 'metaKey' | 'shiftKey' | 'altKey' + /** * CSS class for selected items in multi-drag mode * @defaultValue 'sortable-selected' diff --git a/tests/e2e/debug-cross-container-final.spec.ts b/tests/e2e/debug-cross-container-final.spec.ts new file mode 100644 index 0000000..9d3e5db --- /dev/null +++ b/tests/e2e/debug-cross-container-final.spec.ts @@ -0,0 +1,107 @@ +import { test, expect } from '@playwright/test' +import { getItemOrder } from '../helpers/drag-helpers' + +test.describe('Cross-Container Drag - Final Verification', () => { + test('verify cross-container drag works correctly', async ({ page }) => { + console.log('\n=== Final Cross-Container Drag Verification ===') + + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + // Get initial state + const initialList1 = await getItemOrder( + page, + '#multi-1', + '.horizontal-item' + ) + const initialList2 = await getItemOrder( + page, + '#multi-2', + '.horizontal-item' + ) + + console.log('Initial state:') + console.log(' List 1:', initialList1) + console.log(' List 2:', initialList2) + + // Verify initial setup + expect(initialList1).toEqual(['List 1 - A', 'List 1 - B', 'List 1 - C']) + expect(initialList2).toEqual(['List 2 - X', 'List 2 - Y', 'List 2 - Z']) + + // Perform cross-container drag using Playwright's dragTo + const sourceItem = page.locator('#multi-1 .horizontal-item').first() + const targetContainer = page.locator('#multi-2') + + console.log('\nPerforming cross-container drag...') + await sourceItem.dragTo(targetContainer) + await page.waitForTimeout(500) + + // Check final state + const finalList1 = await getItemOrder(page, '#multi-1', '.horizontal-item') + const finalList2 = await getItemOrder(page, '#multi-2', '.horizontal-item') + + console.log('Final state:') + console.log(' List 1:', finalList1) + console.log(' List 2:', finalList2) + + // Verify cross-container movement occurred + const itemMovedFromList1 = finalList1.length === 2 + const itemMovedToList2 = finalList2.length === 4 + const list1AItemMoved = !finalList1.includes('List 1 - A') + const list2HasList1Item = finalList2.some((item) => + item.startsWith('List 1') + ) + + console.log('\nVerification results:') + console.log(' Item moved from List 1:', itemMovedFromList1) + console.log(' Item moved to List 2:', itemMovedToList2) + console.log(' "List 1 - A" moved:', list1AItemMoved) + console.log(' List 2 contains List 1 item:', list2HasList1Item) + + // Assert successful cross-container drag + expect(itemMovedFromList1).toBe(true) + expect(itemMovedToList2).toBe(true) + expect(list1AItemMoved).toBe(true) + expect(list2HasList1Item).toBe(true) + + // Verify total item count is preserved + const totalItems = finalList1.length + finalList2.length + expect(totalItems).toBe(6) + + console.log('\n✅ Cross-container drag functionality verified!') + }) + + test('verify group configuration', async ({ page }) => { + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + const config = await page.evaluate(() => { + const multi1 = document.getElementById('multi-1') + const multi2 = document.getElementById('multi-2') + + return { + multi1Group: multi1?.dataset.sortableGroup, + multi2Group: multi2?.dataset.sortableGroup, + multi1DropZone: multi1?.dataset.dropZone, + multi2DropZone: multi2?.dataset.dropZone, + groupsMatch: + multi1?.dataset.sortableGroup === multi2?.dataset.sortableGroup, + } + }) + + console.log('Configuration check:', config) + + // Verify correct group configuration + expect(config.multi1Group).toBe('shared-horizontal') + expect(config.multi2Group).toBe('shared-horizontal') + expect(config.multi1DropZone).toBe('true') + expect(config.multi2DropZone).toBe('true') + expect(config.groupsMatch).toBe(true) + + console.log('✅ Group configuration verified!') + }) +}) diff --git a/tests/e2e/debug-cross-container-simple.spec.ts b/tests/e2e/debug-cross-container-simple.spec.ts new file mode 100644 index 0000000..5b35908 --- /dev/null +++ b/tests/e2e/debug-cross-container-simple.spec.ts @@ -0,0 +1,372 @@ +import { test, expect } from '@playwright/test' +import { injectEventLogger, getItemOrder } from '../helpers/drag-helpers' + +test.describe('Cross-Container Drag Debug - Simple', () => { + test('basic cross-container setup check', async ({ page }) => { + console.log('\n=== Basic Cross-Container Setup Check ===') + + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + // Capture console logs + const logs: string[] = [] + page.on('console', (msg) => { + const text = msg.text() + logs.push(text) + console.log(`[CONSOLE] ${text}`) + }) + + // Step 1: Basic element existence check + const elementsExist = await page.evaluate(() => { + return { + multi1: !!document.getElementById('multi-1'), + multi2: !!document.getElementById('multi-2'), + multi1Items: document.querySelectorAll('#multi-1 .horizontal-item') + .length, + multi2Items: document.querySelectorAll('#multi-2 .horizontal-item') + .length, + } + }) + + console.log('Elements exist:', elementsExist) + expect(elementsExist.multi1).toBe(true) + expect(elementsExist.multi2).toBe(true) + expect(elementsExist.multi1Items).toBe(3) + expect(elementsExist.multi2Items).toBe(3) + + // Step 2: Check basic configuration + const config = await page.evaluate(() => { + const multi1 = document.getElementById('multi-1') + const multi2 = document.getElementById('multi-2') + + return { + multi1: { + id: multi1?.id, + dropZone: multi1?.dataset.dropZone, + sortableGroup: multi1?.dataset.sortableGroup, + hasClass: multi1?.classList.contains('sortable-drop-zone'), + }, + multi2: { + id: multi2?.id, + dropZone: multi2?.dataset.dropZone, + sortableGroup: multi2?.dataset.sortableGroup, + hasClass: multi2?.classList.contains('sortable-drop-zone'), + }, + } + }) + + console.log('Configuration:', config) + expect(config.multi1.dropZone).toBe('true') + expect(config.multi2.dropZone).toBe('true') + expect(config.multi1.sortableGroup).toBe('shared-horizontal') + expect(config.multi2.sortableGroup).toBe('shared-horizontal') + + // Step 3: Check draggable attributes + const draggableStates = await page.evaluate(() => { + const items1 = Array.from( + document.querySelectorAll('#multi-1 .horizontal-item') + ) + const items2 = Array.from( + document.querySelectorAll('#multi-2 .horizontal-item') + ) + + return { + list1Items: items1.map((item) => ({ + text: item.textContent, + draggable: (item as HTMLElement).draggable, + })), + list2Items: items2.map((item) => ({ + text: item.textContent, + draggable: (item as HTMLElement).draggable, + })), + } + }) + + console.log('Draggable states:', draggableStates) + + // All items should be draggable + draggableStates.list1Items.forEach((item) => { + expect(item.draggable).toBe(true) + }) + draggableStates.list2Items.forEach((item) => { + expect(item.draggable).toBe(true) + }) + + // Step 4: Try to access Sortable/DragManager instances + const instanceInfo = await page.evaluate(() => { + const info = { + sortableInstances: 0, + dragManagerRegistry: 0, + globalDragState: false, + windowProperties: [] as string[], + } + + // Check window properties that might contain our instances + for (const prop in window) { + if ( + prop.toLowerCase().includes('sortable') || + prop.toLowerCase().includes('drag') || + prop.toLowerCase().includes('resortable') + ) { + info.windowProperties.push(prop) + } + } + + // Try to access known global objects + try { + const sortableInstances = (window as any).sortableInstances + if (sortableInstances) { + info.sortableInstances = Array.isArray(sortableInstances) + ? sortableInstances.length + : 1 + } + } catch (e) { + // ignore + } + + try { + const dragManager = (window as any).DragManager + if (dragManager && dragManager.registry) { + info.dragManagerRegistry = dragManager.registry.size + } + } catch (e) { + // ignore + } + + try { + const globalState = (window as any).globalDragState + info.globalDragState = !!globalState + } catch (e) { + // ignore + } + + return info + }) + + console.log('Instance info:', instanceInfo) + + // Step 5: Simple drag event test + console.log('\n=== Simple Drag Event Test ===') + + await injectEventLogger(page, '#multi-1') + await injectEventLogger(page, '#multi-2') + + // Get initial order + const initialOrder1 = await getItemOrder( + page, + '#multi-1', + '.horizontal-item' + ) + const initialOrder2 = await getItemOrder( + page, + '#multi-2', + '.horizontal-item' + ) + + console.log('Initial orders:') + console.log(' List 1:', initialOrder1) + console.log(' List 2:', initialOrder2) + + // Try a simple dragstart event to see what happens + const dragStartResult = await page.evaluate(() => { + const firstItem = document.querySelector( + '#multi-1 .horizontal-item:first-child' + ) as HTMLElement + if (!firstItem) return { error: 'No first item found' } + + const event = new DragEvent('dragstart', { + bubbles: true, + cancelable: true, + dataTransfer: new DataTransfer(), + }) + + if (event.dataTransfer) { + event.dataTransfer.setData('text/plain', 'test') + event.dataTransfer.effectAllowed = 'move' + } + + console.log('Dispatching dragstart on:', firstItem.textContent) + const result = firstItem.dispatchEvent(event) + + return { + dispatched: result, + prevented: event.defaultPrevented, + itemText: firstItem.textContent, + dataTransferTypes: event.dataTransfer + ? Array.from(event.dataTransfer.types) + : [], + } + }) + + console.log('Drag start result:', dragStartResult) + + // Wait for any async effects + await page.waitForTimeout(500) + + // Check if anything changed + const afterOrder1 = await getItemOrder(page, '#multi-1', '.horizontal-item') + const afterOrder2 = await getItemOrder(page, '#multi-2', '.horizontal-item') + + console.log('After dragstart:') + console.log(' List 1:', afterOrder1) + console.log(' List 2:', afterOrder2) + + // Filter console logs for drag-related messages + const dragLogs = logs.filter( + (log) => + log.includes('drag') || + log.includes('Drag') || + log.includes('DRAG') || + log.includes('[EVENT]') + ) + + console.log('\n=== Drag-related logs ===') + dragLogs.forEach((log) => console.log(` ${log}`)) + + // Basic assertions - the test should at least not crash + expect(dragStartResult.dispatched).toBe(true) + expect(initialOrder1.length).toBe(3) + expect(initialOrder2.length).toBe(3) + }) + + test('manual dragover test', async ({ page }) => { + console.log('\n=== Manual Dragover Test ===') + + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + // Capture console logs + const logs: string[] = [] + page.on('console', (msg) => { + const text = msg.text() + if ( + text.includes('drag') || + text.includes('Drag') || + text.includes('EVENT') + ) { + logs.push(text) + console.log(`[CONSOLE] ${text}`) + } + }) + + await injectEventLogger(page, '#multi-1') + await injectEventLogger(page, '#multi-2') + + // Test complete drag sequence + const dragSequenceResult = await page.evaluate(() => { + const sourceItem = document.querySelector( + '#multi-1 .horizontal-item:first-child' + ) as HTMLElement + const targetContainer = document.querySelector('#multi-2') as HTMLElement + + if (!sourceItem || !targetContainer) { + return { error: 'Elements not found' } + } + + const results = { + dragstart: false, + dragover: false, + drop: false, + dragend: false, + errors: [] as string[], + } + + try { + // Create shared DataTransfer + const dataTransfer = new DataTransfer() + dataTransfer.setData('text/plain', 'sortable-item') + dataTransfer.effectAllowed = 'move' + + // 1. Dragstart + const dragStartEvent = new DragEvent('dragstart', { + bubbles: true, + cancelable: true, + dataTransfer, + }) + + console.log('Dispatching dragstart...') + results.dragstart = sourceItem.dispatchEvent(dragStartEvent) + + // Small delay + setTimeout(() => { + // 2. Dragover on target + const dragOverEvent = new DragEvent('dragover', { + bubbles: true, + cancelable: true, + dataTransfer, + clientX: 500, + clientY: 300, + }) + + console.log('Dispatching dragover...') + results.dragover = targetContainer.dispatchEvent(dragOverEvent) + + setTimeout(() => { + // 3. Drop + const dropEvent = new DragEvent('drop', { + bubbles: true, + cancelable: true, + dataTransfer, + clientX: 500, + clientY: 300, + }) + + console.log('Dispatching drop...') + results.drop = targetContainer.dispatchEvent(dropEvent) + + setTimeout(() => { + // 4. Dragend + const dragEndEvent = new DragEvent('dragend', { + bubbles: true, + cancelable: true, + dataTransfer, + }) + + console.log('Dispatching dragend...') + results.dragend = sourceItem.dispatchEvent(dragEndEvent) + }, 10) + }, 10) + }, 10) + } catch (e) { + results.errors.push(String(e)) + } + + return results + }) + + // Wait for all events to process + await page.waitForTimeout(1000) + + console.log('Drag sequence results:', dragSequenceResult) + + // Check final state + const finalOrder1 = await getItemOrder(page, '#multi-1', '.horizontal-item') + const finalOrder2 = await getItemOrder(page, '#multi-2', '.horizontal-item') + + console.log('Final orders:') + console.log(' List 1:', finalOrder1) + console.log(' List 2:', finalOrder2) + + console.log('\n=== All drag-related logs ===') + logs.forEach((log) => console.log(` ${log}`)) + + // Check if cross-container movement occurred + const crossContainerWorking = + finalOrder1.length !== 3 || finalOrder2.length !== 3 + console.log('Cross-container drag working:', crossContainerWorking) + + if (!crossContainerWorking) { + console.log('❌ Cross-container drag did not work') + console.log('Expected: Items to move between containers') + console.log('Actual: Items remained in original containers') + } + + expect( + dragSequenceResult.error || dragSequenceResult.errors?.length || 0 + ).toBe(0) + }) +}) diff --git a/tests/e2e/debug-cross-container.spec.ts b/tests/e2e/debug-cross-container.spec.ts new file mode 100644 index 0000000..b7469ca --- /dev/null +++ b/tests/e2e/debug-cross-container.spec.ts @@ -0,0 +1,557 @@ +import { test, expect } from '@playwright/test' +import { + injectEventLogger, + getItemOrder, + getDraggableState, + dragAndDropNative, +} from '../helpers/drag-helpers' + +test.describe('Cross-Container Drag Debug', () => { + test('comprehensive cross-container debug analysis', async ({ page }) => { + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + console.log('\n=== Starting Comprehensive Cross-Container Drag Debug ===') + + // Step 1: Inject event loggers and capture console + const logs: string[] = [] + page.on('console', (msg) => { + const text = msg.text() + logs.push(`[${msg.type()}] ${text}`) + console.log(`CONSOLE: ${text}`) + }) + + await injectEventLogger(page, '#multi-1') + await injectEventLogger(page, '#multi-2') + + // Step 2: Get initial state + const list1Initial = await getItemOrder( + page, + '#multi-1', + '.horizontal-item' + ) + const list2Initial = await getItemOrder( + page, + '#multi-2', + '.horizontal-item' + ) + + console.log('\n=== Initial State ===') + console.log('List 1:', list1Initial) + console.log('List 2:', list2Initial) + + // Step 3: Check Sortable instances and configuration + const sortableConfig = await page.evaluate(() => { + const multi1 = document.getElementById('multi-1') + const multi2 = document.getElementById('multi-2') + + const info = { + multi1: { + id: multi1?.id, + dropZone: multi1?.dataset.dropZone, + sortableGroup: multi1?.dataset.sortableGroup, + classList: multi1?.className.split(' '), + hasEventListeners: { + dragstart: false, + dragover: false, + drop: false, + dragend: false, + }, + }, + multi2: { + id: multi2?.id, + dropZone: multi2?.dataset.dropZone, + sortableGroup: multi2?.dataset.sortableGroup, + classList: multi2?.className.split(' '), + hasEventListeners: { + dragstart: false, + dragover: false, + drop: false, + dragend: false, + }, + }, + globalState: null as any, + registrySize: 0, + } + + // Check for event listeners by testing if the events fire + if (multi1 && multi2) { + ;[multi1, multi2].forEach((container, index) => { + if (!container) return + const key = index === 0 ? 'multi1' : 'multi2' + + // Check if dragstart listener exists by creating a test event + try { + const testEvent = new Event('dragstart') + const originalHandler = container.dispatchEvent + let handlerCalled = false + container.dispatchEvent = function (event) { + if (event.type === 'dragstart') handlerCalled = true + return originalHandler.call(this, event) + } + container.dispatchEvent(testEvent) + container.dispatchEvent = originalHandler + info[key].hasEventListeners.dragstart = handlerCalled + } catch (e) { + console.log('Error checking event listeners:', e) + } + }) + } + + // Try to access global drag state and registry + try { + // Access the global drag state if available on window + const globalState = (window as any).globalDragState + if (globalState) { + info.globalState = { + hasActiveDrags: globalState.activeDrags?.size > 0, + activeDragCount: globalState.activeDrags?.size || 0, + hasPutTargets: globalState.putTargets?.size > 0, + } + } + + // Check DragManager registry + const dragManagerClass = (window as any).DragManager + if (dragManagerClass && dragManagerClass.registry) { + info.registrySize = dragManagerClass.registry.size + } + } catch (e) { + console.log('Could not access global state:', e) + } + + return info + }) + + console.log('\n=== Sortable Configuration ===') + console.log(JSON.stringify(sortableConfig, null, 2)) + + // Step 4: Check draggable state of items + const item1State = await getDraggableState( + page, + '#multi-1 .horizontal-item:first-child' + ) + const item2State = await getDraggableState( + page, + '#multi-2 .horizontal-item:first-child' + ) + + console.log('\n=== Draggable States ===') + console.log('First item in List 1:', item1State) + console.log('First item in List 2:', item2State) + + // Step 5: Setup detailed event monitoring during drag + await page.evaluate(() => { + const multi1 = document.getElementById('multi-1') + const multi2 = document.getElementById('multi-2') + + const events = [ + 'dragstart', + 'dragover', + 'dragenter', + 'dragleave', + 'drop', + 'dragend', + ] + + events.forEach((eventName) => { + ;[multi1, multi2].forEach((container) => { + if (!container) return + + container.addEventListener( + eventName, + (e) => { + const target = e.target as HTMLElement + const currentTarget = e.currentTarget as HTMLElement + console.log(`[EVENT] ${eventName} on ${currentTarget.id}`) + console.log( + ` - target: ${target.textContent || target.id || target.className}` + ) + console.log( + ` - clientX: ${(e as DragEvent).clientX}, clientY: ${(e as DragEvent).clientY}` + ) + + if (eventName === 'dragstart') { + const dragEvent = e as DragEvent + console.log( + ` - dataTransfer types: ${Array.from(dragEvent.dataTransfer?.types || [])}` + ) + console.log( + ` - dataTransfer effectAllowed: ${dragEvent.dataTransfer?.effectAllowed}` + ) + } + + if (eventName === 'dragover' || eventName === 'drop') { + const dragEvent = e as DragEvent + console.log( + ` - dataTransfer dropEffect: ${dragEvent.dataTransfer?.dropEffect}` + ) + console.log( + ` - preventDefault called: ${dragEvent.defaultPrevented}` + ) + } + }, + true + ) // Use capture phase + }) + }) + + console.log('Event monitoring setup complete') + }) + + // Step 6: Monitor GlobalDragState during drag + await page.evaluate(() => { + const originalStartDrag = (window as any).globalDragState?.startDrag + if (originalStartDrag) { + ;(window as any).globalDragState.startDrag = function (...args: any[]) { + console.log('[GLOBAL_DRAG_STATE] startDrag called with:', args) + return originalStartDrag.apply(this, args) + } + } + + const originalEndDrag = (window as any).globalDragState?.endDrag + if (originalEndDrag) { + ;(window as any).globalDragState.endDrag = function (...args: any[]) { + console.log('[GLOBAL_DRAG_STATE] endDrag called with:', args) + return originalEndDrag.apply(this, args) + } + } + + const originalCanAcceptDrop = (window as any).globalDragState + ?.canAcceptDrop + if (originalCanAcceptDrop) { + ;(window as any).globalDragState.canAcceptDrop = function ( + ...args: any[] + ) { + const result = originalCanAcceptDrop.apply(this, args) + console.log( + '[GLOBAL_DRAG_STATE] canAcceptDrop called with:', + args, + 'result:', + result + ) + return result + } + } + }) + + // Step 7: Attempt cross-container drag with multiple strategies + console.log('\n=== Testing Drag Strategy 1: Playwright dragTo ===') + + const sourceItem = page.locator('#multi-1 .horizontal-item').first() + const targetContainer = page.locator('#multi-2') + + // Clear logs before test + logs.length = 0 + + try { + await sourceItem.dragTo(targetContainer) + await page.waitForTimeout(1000) // Give time for events to fire + } catch (e) { + console.log('dragTo error:', e) + } + + const list1After1 = await getItemOrder(page, '#multi-1', '.horizontal-item') + const list2After1 = await getItemOrder(page, '#multi-2', '.horizontal-item') + + console.log('After dragTo:') + console.log(' List 1:', list1After1) + console.log(' List 2:', list2After1) + console.log( + ' Items moved:', + list1After1.length !== list1Initial.length || + list2After1.length !== list2Initial.length + ) + + // Check GlobalDragState after first attempt + const globalStateAfter1 = await page.evaluate(() => { + const state = (window as any).globalDragState + return { + activeDrags: state?.activeDrags?.size || 0, + putTargets: state?.putTargets?.size || 0, + } + }) + console.log('GlobalDragState after dragTo:', globalStateAfter1) + + // Step 8: Try manual mouse drag + console.log('\n=== Testing Drag Strategy 2: Manual Mouse Events ===') + + // Reset if needed + if ( + list1After1.length !== list1Initial.length || + list2After1.length !== list2Initial.length + ) { + await page.reload() + await page.waitForLoadState('networkidle') + await injectEventLogger(page, '#multi-1') + await injectEventLogger(page, '#multi-2') + } + + logs.length = 0 + + try { + await dragAndDropNative( + page, + '#multi-1 .horizontal-item:first-child', + '#multi-2', + { + delay: 200, + steps: 10, + } + ) + await page.waitForTimeout(1000) + } catch (e) { + console.log('dragAndDropNative error:', e) + } + + const list1After2 = await getItemOrder(page, '#multi-1', '.horizontal-item') + const list2After2 = await getItemOrder(page, '#multi-2', '.horizontal-item') + + console.log('After manual drag:') + console.log(' List 1:', list1After2) + console.log(' List 2:', list2After2) + console.log( + ' Items moved:', + list1After2.length !== list1Initial.length || + list2After2.length !== list2Initial.length + ) + + // Step 9: Try dispatching events manually + console.log('\n=== Testing Drag Strategy 3: Manual Events ===') + + logs.length = 0 + + await page.evaluate(() => { + const sourceItem = document.querySelector( + '#multi-1 .horizontal-item:first-child' + ) as HTMLElement + const targetContainer = document.querySelector('#multi-2') as HTMLElement + + if (!sourceItem || !targetContainer) { + console.log('Could not find source or target elements') + return + } + + console.log('Manually dispatching drag events...') + + // Create drag start event + const dragStartEvent = new DragEvent('dragstart', { + bubbles: true, + cancelable: true, + dataTransfer: new DataTransfer(), + }) + + // Set data transfer + dragStartEvent.dataTransfer?.setData('text/plain', 'sortable-item') + if (dragStartEvent.dataTransfer) { + dragStartEvent.dataTransfer.effectAllowed = 'move' + } + + console.log('Dispatching dragstart on:', sourceItem.textContent) + const dragStartResult = sourceItem.dispatchEvent(dragStartEvent) + console.log('Dragstart result:', dragStartResult) + + // Wait a bit then dispatch dragover on target + setTimeout(() => { + const dragOverEvent = new DragEvent('dragover', { + bubbles: true, + cancelable: true, + dataTransfer: dragStartEvent.dataTransfer, + clientX: 500, + clientY: 300, + }) + + console.log('Dispatching dragover on:', targetContainer.id) + const dragOverResult = targetContainer.dispatchEvent(dragOverEvent) + console.log('Dragover result:', dragOverResult) + + // Then dispatch drop + setTimeout(() => { + const dropEvent = new DragEvent('drop', { + bubbles: true, + cancelable: true, + dataTransfer: dragStartEvent.dataTransfer, + clientX: 500, + clientY: 300, + }) + + console.log('Dispatching drop on:', targetContainer.id) + const dropResult = targetContainer.dispatchEvent(dropEvent) + console.log('Drop result:', dropResult) + + // Finally dispatch dragend + setTimeout(() => { + const dragEndEvent = new DragEvent('dragend', { + bubbles: true, + cancelable: true, + dataTransfer: dragStartEvent.dataTransfer, + }) + + console.log('Dispatching dragend on:', sourceItem.textContent) + const dragEndResult = sourceItem.dispatchEvent(dragEndEvent) + console.log('Dragend result:', dragEndResult) + }, 50) + }, 50) + }, 50) + }) + + await page.waitForTimeout(1000) + + const list1After3 = await getItemOrder(page, '#multi-1', '.horizontal-item') + const list2After3 = await getItemOrder(page, '#multi-2', '.horizontal-item') + + console.log('After manual events:') + console.log(' List 1:', list1After3) + console.log(' List 2:', list2After3) + console.log( + ' Items moved:', + list1After3.length !== list1Initial.length || + list2After3.length !== list2Initial.length + ) + + // Step 10: Final analysis + console.log('\n=== Final Analysis ===') + + const finalGlobalState = await page.evaluate(() => { + const state = (window as any).globalDragState + return { + activeDrags: state?.activeDrags?.size || 0, + putTargets: state?.putTargets?.size || 0, + methods: state + ? Object.getOwnPropertyNames(Object.getPrototypeOf(state)) + : [], + } + }) + + console.log('Final GlobalDragState:', finalGlobalState) + + // Filter and display relevant event logs + const relevantLogs = logs.filter( + (log) => + log.includes('drag') || + log.includes('GLOBAL_DRAG_STATE') || + log.includes('[EVENT]') || + log.includes('Manually') || + log.includes('result:') + ) + + console.log('\n=== Event Timeline ===') + relevantLogs.slice(-30).forEach((log, index) => { + console.log(`${index + 1}: ${log}`) + }) + + // Step 11: Check for errors or issues + const hasErrors = logs.some( + (log) => log.includes('[error]') || log.includes('Error') + ) + const hasWarnings = logs.some( + (log) => log.includes('[warn]') || log.includes('Warning') + ) + + console.log('\n=== Issues Detected ===') + console.log('Has errors:', hasErrors) + console.log('Has warnings:', hasWarnings) + console.log( + 'Cross-container drag working:', + list1After1.length !== list1Initial.length || + list1After2.length !== list1Initial.length || + list1After3.length !== list1Initial.length + ) + + // Fail the test if cross-container drag is not working + const crossContainerWorking = + list1After1.length !== list1Initial.length || + list1After2.length !== list1Initial.length || + list1After3.length !== list1Initial.length + + if (!crossContainerWorking) { + console.log('\n❌ Cross-container drag is NOT working with any strategy') + console.log('Expected: Items to move between containers') + console.log('Actual: No items moved between containers') + } else { + console.log('\n✅ Cross-container drag is working') + } + + // Add assertions for key requirements + expect(sortableConfig.multi1.dropZone).toBe('true') + expect(sortableConfig.multi2.dropZone).toBe('true') + expect(sortableConfig.multi1.sortableGroup).toBe('shared-horizontal') + expect(sortableConfig.multi2.sortableGroup).toBe('shared-horizontal') + expect(item1State.draggable).toBe(true) + expect(item2State.draggable).toBe(true) + }) + + test('check group compatibility in isolation', async ({ page }) => { + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + const groupCompatibility = await page.evaluate(() => { + const result = { + groupManagersFound: 0, + canAcceptDrop: false, + groupNames: [] as string[], + compatibility: null as any, + } + + try { + // Try to access DragManager registry + const dragManagerClass = (window as any).DragManager + if (dragManagerClass && dragManagerClass.registry) { + const registry = dragManagerClass.registry + result.groupManagersFound = registry.size + + // Get group names from each manager + for (const [element, manager] of registry) { + const groupManager = manager.getGroupManager?.() + if (groupManager) { + const groupName = groupManager.getName() + result.groupNames.push(groupName) + } + } + + // Test compatibility if we have 2 managers + if (result.groupNames.length >= 2) { + const firstManager = Array.from(registry.values())[0] + const secondGroupName = result.groupNames[1] + + const groupManager = firstManager.getGroupManager?.() + if (groupManager) { + result.compatibility = { + canPullTo: groupManager.canPullTo(secondGroupName), + shouldClone: groupManager.shouldClone(), + pullMode: groupManager.getPullMode(secondGroupName), + } + } + } + } + + // Test globalDragState canAcceptDrop function + const globalState = (window as any).globalDragState + if (globalState && result.groupNames.length >= 2) { + result.canAcceptDrop = globalState.canAcceptDrop( + 'html5-drag', + result.groupNames[1] + ) + } + } catch (e) { + console.log('Error checking group compatibility:', e) + } + + return result + }) + + console.log('\n=== Group Compatibility Analysis ===') + console.log(JSON.stringify(groupCompatibility, null, 2)) + + // Don't fail if no group managers found - just log the issue + if (groupCompatibility.groupManagersFound === 0) { + console.log( + '⚠️ No DragManager instances found in registry - this indicates an initialization issue' + ) + } + expect(groupCompatibility.groupManagersFound).toBeGreaterThanOrEqual(0) + }) +}) diff --git a/tests/e2e/debug-globals-access.spec.ts b/tests/e2e/debug-globals-access.spec.ts new file mode 100644 index 0000000..018a893 --- /dev/null +++ b/tests/e2e/debug-globals-access.spec.ts @@ -0,0 +1,225 @@ +import { test, expect } from '@playwright/test' + +test.describe('Debug Globals Access', () => { + test('check how to access Sortable instances from browser', async ({ + page, + }) => { + console.log('\n=== Debug Globals Access ===') + + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + // Wait a bit more to ensure scripts are fully loaded + await page.waitForTimeout(1000) + + const accessCheck = await page.evaluate(() => { + const result = { + windowKeys: [] as string[], + documentKeys: [] as string[], + importedSortable: null as any, + moduleAccess: null as any, + staticAccess: null as any, + scriptErrors: [] as string[], + } + + // Check all window properties + for (const key in window) { + if ( + key.includes('ortable') || + key.includes('rag') || + key.includes('esort') + ) { + result.windowKeys.push(key) + } + } + + // Check document properties + for (const key in document) { + if (key.includes('ortable') || key.includes('rag')) { + result.documentKeys.push(key) + } + } + + try { + // Try to access the imported Sortable class directly + // This should work since the HTML page imports it + const Sortable = (window as any).Sortable + if (Sortable) { + result.importedSortable = { + exists: true, + isFunction: typeof Sortable === 'function', + hasInstances: !!Sortable.instances, + instancesType: typeof Sortable.instances, + hasActive: 'active' in Sortable, + hasDragged: 'dragged' in Sortable, + hasClosest: 'closest' in Sortable, + prototype: Object.getOwnPropertyNames(Sortable.prototype), + } + + // Try to access the instances WeakMap + if (Sortable.instances) { + try { + // We can't enumerate WeakMap, but we can test if elements are registered + const multi1 = document.getElementById('multi-1') + const multi2 = document.getElementById('multi-2') + + if (multi1 && multi2) { + result.staticAccess = { + multi1HasInstance: Sortable.instances.has(multi1), + multi2HasInstance: Sortable.instances.has(multi2), + canGetInstance1: !!Sortable.instances.get(multi1), + canGetInstance2: !!Sortable.instances.get(multi2), + } + } + } catch (e) { + result.scriptErrors.push(`WeakMap access error: ${e}`) + } + } + } + + // Try accessing through module system + if ((window as any).__viteModule) { + result.moduleAccess = { + hasViteModule: true, + moduleKeys: Object.keys((window as any).__viteModule), + } + } + } catch (e) { + result.scriptErrors.push(`Main access error: ${e}`) + } + + return result + }) + + console.log('Access check results:', JSON.stringify(accessCheck, null, 2)) + + // Also check if we can access DragManager registry through a different route + const dragManagerCheck = await page.evaluate(() => { + const result = { + foundDragManager: false, + registrySize: 0, + registryAccess: null as any, + globalDragStateFound: false, + errors: [] as string[], + } + + try { + // The module is imported, so it should create instances + // Let's check if we can find them through the elements themselves + const multi1 = document.getElementById('multi-1') + const multi2 = document.getElementById('multi-2') + + if (multi1 && multi2) { + // Check if the elements have been initialized with Sortable + result.registryAccess = { + multi1HasDropZone: multi1.dataset.dropZone === 'true', + multi2HasDropZone: multi2.dataset.dropZone === 'true', + multi1HasGroup: !!multi1.dataset.sortableGroup, + multi2HasGroup: !!multi2.dataset.sortableGroup, + multi1Classes: Array.from(multi1.classList), + multi2Classes: Array.from(multi2.classList), + multi1Children: multi1.children.length, + multi2Children: multi2.children.length, + } + + // Check if items are actually draggable + const items1 = Array.from(multi1.querySelectorAll('.horizontal-item')) + const items2 = Array.from(multi2.querySelectorAll('.horizontal-item')) + + result.registryAccess.items1Draggable = items1.map( + (item) => (item as HTMLElement).draggable + ) + result.registryAccess.items2Draggable = items2.map( + (item) => (item as HTMLElement).draggable + ) + } + } catch (e) { + result.errors.push(`DragManager check error: ${e}`) + } + + return result + }) + + console.log( + 'DragManager check results:', + JSON.stringify(dragManagerCheck, null, 2) + ) + + // Try to trigger Sortable creation manually to see if it works + const manualCreate = await page.evaluate(() => { + const result = { + success: false, + error: null as any, + instanceCreated: false, + afterCreation: null as any, + } + + try { + // Try to import Sortable manually + const Sortable = (window as any).Sortable + if (!Sortable) { + result.error = 'Sortable not available on window' + return result + } + + // Try to create an instance manually + const testElement = document.createElement('div') + testElement.id = 'test-sortable' + document.body.appendChild(testElement) + + const instance = new Sortable(testElement, { + group: 'test-group', + }) + + result.instanceCreated = !!instance + result.success = true + + // Check if it was registered + result.afterCreation = { + hasInstance: Sortable.instances.has(testElement), + canGetInstance: !!Sortable.instances.get(testElement), + instanceType: typeof instance, + elementHasDropZone: testElement.dataset.dropZone === 'true', + } + + // Clean up + instance.destroy() + testElement.remove() + } catch (e) { + result.error = String(e) + } + + return result + }) + + console.log('Manual creation test:', JSON.stringify(manualCreate, null, 2)) + + // Basic assertions + expect(accessCheck.scriptErrors.length).toBe(0) + expect(dragManagerCheck.errors.length).toBe(0) + + if (accessCheck.importedSortable?.exists) { + console.log('✅ Sortable class is accessible') + expect(accessCheck.staticAccess?.multi1HasInstance).toBe(true) + expect(accessCheck.staticAccess?.multi2HasInstance).toBe(true) + } else { + console.log('❌ Sortable class is not accessible - checking why...') + + // Check if it's a module loading issue + if (!accessCheck.importedSortable) { + console.log( + 'Sortable is not on window object - might be module scope issue' + ) + } + } + + if (manualCreate.success) { + console.log('✅ Manual Sortable creation works') + expect(manualCreate.instanceCreated).toBe(true) + } else { + console.log('❌ Manual Sortable creation failed:', manualCreate.error) + } + }) +}) diff --git a/tests/e2e/debug-immediate-dragend.spec.ts b/tests/e2e/debug-immediate-dragend.spec.ts new file mode 100644 index 0000000..ce6c6df --- /dev/null +++ b/tests/e2e/debug-immediate-dragend.spec.ts @@ -0,0 +1,471 @@ +import { test, expect } from '@playwright/test' +import { injectEventLogger } from '../helpers/drag-helpers' + +test.describe('Debug Immediate Dragend Issue', () => { + test('investigate why dragend fires immediately', async ({ page }) => { + console.log('\n=== Investigating Immediate Dragend Issue ===') + + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + const logs: string[] = [] + const eventSequence: Array<{ + type: string + target: string + timestamp: number + clientX?: number + clientY?: number + }> = [] + + page.on('console', (msg) => { + const text = msg.text() + logs.push(text) + if (text.includes('[EVENT]') || text.includes('drag')) { + console.log(`[CONSOLE] ${text}`) + } + }) + + // Enhanced event logging with timing + await page.evaluate(() => { + const eventSequence: Array<{ + type: string + target: string + timestamp: number + clientX?: number + clientY?: number + }> = [] + + const multi1 = document.getElementById('multi-1') + const multi2 = document.getElementById('multi-2') + + const events = [ + 'dragstart', + 'dragover', + 'dragenter', + 'dragleave', + 'drop', + 'dragend', + ] + + events.forEach((eventName) => { + ;[multi1, multi2].forEach((container) => { + if (!container) return + + container.addEventListener( + eventName, + (e) => { + const target = e.target as HTMLElement + const timestamp = Date.now() + const dragEvent = e as DragEvent + + const eventInfo = { + type: eventName, + target: + target.textContent?.trim() || target.id || target.className, + timestamp, + clientX: dragEvent.clientX, + clientY: dragEvent.clientY, + } + + eventSequence.push(eventInfo) + + console.log(`[EVENT_DETAILED] ${eventName} at ${timestamp}`) + console.log(` - target: ${eventInfo.target}`) + console.log( + ` - coords: (${dragEvent.clientX}, ${dragEvent.clientY})` + ) + console.log(` - bubbles: ${e.bubbles}`) + console.log(` - cancelable: ${e.cancelable}`) + console.log(` - defaultPrevented: ${e.defaultPrevented}`) + + if (eventName === 'dragstart') { + console.log( + ` - dataTransfer.effectAllowed: ${dragEvent.dataTransfer?.effectAllowed}` + ) + console.log( + ` - dataTransfer.types: ${Array.from(dragEvent.dataTransfer?.types || [])}` + ) + } + + if (eventName === 'dragover' || eventName === 'drop') { + console.log( + ` - dataTransfer.dropEffect: ${dragEvent.dataTransfer?.dropEffect}` + ) + } + + // Check if preventDefault was called + if (eventName === 'dragover') { + if (!e.defaultPrevented) { + console.log( + ` - ⚠️ WARNING: preventDefault not called on dragover!` + ) + } + } + }, + true + ) // Use capture phase + }) + }) + + // Also add document-level listeners to catch global events + events.forEach((eventName) => { + document.addEventListener( + eventName, + (e) => { + const target = e.target as HTMLElement + const timestamp = Date.now() + + if (target.closest('#multi-1') || target.closest('#multi-2')) { + console.log( + `[DOCUMENT_EVENT] ${eventName} at ${timestamp} on ${target.textContent?.trim() || target.id}` + ) + } + }, + true + ) + }) + + // Expose event sequence for later access + ;(window as any).__eventSequence = eventSequence + }) + + // Test 1: Real mouse drag with fine control + console.log('\n=== Test 1: Real Mouse Drag ===') + + const sourceItem = page.locator('#multi-1 .horizontal-item').first() + const targetContainer = page.locator('#multi-2') + + // Get precise coordinates + const sourceBox = await sourceItem.boundingBox() + const targetBox = await targetContainer.boundingBox() + + if (!sourceBox || !targetBox) { + throw new Error('Could not get element bounds') + } + + const sourceX = sourceBox.x + sourceBox.width / 2 + const sourceY = sourceBox.y + sourceBox.height / 2 + const targetX = targetBox.x + targetBox.width / 2 + const targetY = targetBox.y + targetBox.height / 2 + + console.log(`Source coords: (${sourceX}, ${sourceY})`) + console.log(`Target coords: (${targetX}, ${targetY})`) + + // Start the drag with precise timing + console.log('Starting mouse down...') + await page.mouse.move(sourceX, sourceY) + await page.mouse.down() + + // Small delay to let dragstart fire + await page.waitForTimeout(100) + + console.log('Moving to target...') + // Move slowly in steps to trigger dragover events + const steps = 10 + for (let i = 1; i <= steps; i++) { + const progress = i / steps + const currentX = sourceX + (targetX - sourceX) * progress + const currentY = sourceY + (targetY - sourceY) * progress + + await page.mouse.move(currentX, currentY) + await page.waitForTimeout(50) // Small delay between moves + } + + console.log('Releasing mouse...') + await page.mouse.up() + + // Wait for all events to settle + await page.waitForTimeout(500) + + // Get the event sequence + const finalEventSequence = await page.evaluate(() => { + return (window as any).__eventSequence || [] + }) + + console.log('\n=== Event Sequence Analysis ===') + console.log(`Total events captured: ${finalEventSequence.length}`) + + finalEventSequence.forEach((event: any, index: number) => { + console.log( + `${index + 1}. ${event.type} - ${event.target} (${event.timestamp})` + ) + }) + + // Check for the immediate dragend issue + const dragStartEvents = finalEventSequence.filter( + (e: any) => e.type === 'dragstart' + ) + const dragOverEvents = finalEventSequence.filter( + (e: any) => e.type === 'dragover' + ) + const dropEvents = finalEventSequence.filter((e: any) => e.type === 'drop') + const dragEndEvents = finalEventSequence.filter( + (e: any) => e.type === 'dragend' + ) + + console.log('\n=== Event Analysis ===') + console.log(`Dragstart events: ${dragStartEvents.length}`) + console.log(`Dragover events: ${dragOverEvents.length}`) + console.log(`Drop events: ${dropEvents.length}`) + console.log(`Dragend events: ${dragEndEvents.length}`) + + if (dragStartEvents.length > 0 && dragEndEvents.length > 0) { + const timeBetween = + dragEndEvents[0].timestamp - dragStartEvents[0].timestamp + console.log(`Time between dragstart and dragend: ${timeBetween}ms`) + + if (timeBetween < 100) { + console.log( + '⚠️ ISSUE DETECTED: Dragend fires very quickly after dragstart!' + ) + } + } + + // Test 2: Playwright's dragTo method + console.log('\n=== Test 2: Playwright dragTo ===') + + // Clear event sequence + await page.evaluate(() => { + ;(window as any).__eventSequence = [] + }) + + // Try Playwright's built-in dragTo + try { + await sourceItem.dragTo(targetContainer) + await page.waitForTimeout(300) + } catch (e) { + console.log('dragTo failed:', e) + } + + const dragToEventSequence = await page.evaluate(() => { + return (window as any).__eventSequence || [] + }) + + console.log(`DragTo events captured: ${dragToEventSequence.length}`) + dragToEventSequence.forEach((event: any, index: number) => { + console.log(`${index + 1}. ${event.type} - ${event.target}`) + }) + + // Check final item positions + const finalPositions = await page.evaluate(() => { + const list1Items = Array.from( + document.querySelectorAll('#multi-1 .horizontal-item') + ).map((el) => el.textContent?.trim()) + const list2Items = Array.from( + document.querySelectorAll('#multi-2 .horizontal-item') + ).map((el) => el.textContent?.trim()) + + return { + list1: list1Items, + list2: list2Items, + list1Count: list1Items.length, + list2Count: list2Items.length, + } + }) + + console.log('\n=== Final Positions ===') + console.log('List 1:', finalPositions.list1) + console.log('List 2:', finalPositions.list2) + + const crossContainerWorked = + finalPositions.list1Count !== 3 || finalPositions.list2Count !== 3 + console.log('Cross-container drag worked:', crossContainerWorked) + + // Key diagnostic checks + expect(dragStartEvents.length).toBeGreaterThan(0) // Should have dragstart + + if (dragOverEvents.length === 0) { + console.log( + '❌ ISSUE: No dragover events detected - this prevents drop from working' + ) + } + + if (dropEvents.length === 0) { + console.log( + '❌ ISSUE: No drop events detected - drag sequence incomplete' + ) + } + + // Log relevant console messages + console.log('\n=== Console Messages ===') + const dragRelatedLogs = logs.filter( + (log) => + log.includes('drag') || + log.includes('[EVENT]') || + log.includes('WARNING') || + log.includes('preventDefault') + ) + dragRelatedLogs.slice(-20).forEach((log) => console.log(` ${log}`)) + }) + + test('test with manual event sequence', async ({ page }) => { + console.log('\n=== Manual Event Sequence Test ===') + + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + const logs: string[] = [] + page.on('console', (msg) => { + logs.push(msg.text()) + }) + + await injectEventLogger(page, '#multi-1') + await injectEventLogger(page, '#multi-2') + + // Try the exact sequence that should work + const manualSequenceResult = await page.evaluate(() => { + const results: string[] = [] + + const sourceItem = document.querySelector( + '#multi-1 .horizontal-item:first-child' + ) as HTMLElement + const targetContainer = document.querySelector('#multi-2') as HTMLElement + + if (!sourceItem || !targetContainer) { + return { error: 'Elements not found', results } + } + + // Create a proper DataTransfer object + const dataTransfer = new DataTransfer() + dataTransfer.setData('text/plain', 'sortable-item') + dataTransfer.effectAllowed = 'move' + + try { + // 1. Dispatch dragstart + results.push('Dispatching dragstart...') + const dragStartEvent = new DragEvent('dragstart', { + bubbles: true, + cancelable: true, + dataTransfer, + clientX: 100, + clientY: 100, + }) + + const dragStartResult = sourceItem.dispatchEvent(dragStartEvent) + results.push( + `Dragstart result: ${dragStartResult}, prevented: ${dragStartEvent.defaultPrevented}` + ) + + // 2. Dispatch dragenter on target + results.push('Dispatching dragenter...') + const dragEnterEvent = new DragEvent('dragenter', { + bubbles: true, + cancelable: true, + dataTransfer, + clientX: 500, + clientY: 100, + }) + + const dragEnterResult = targetContainer.dispatchEvent(dragEnterEvent) + results.push( + `Dragenter result: ${dragEnterResult}, prevented: ${dragEnterEvent.defaultPrevented}` + ) + + // 3. Dispatch dragover on target - this is critical! + results.push('Dispatching dragover...') + const dragOverEvent = new DragEvent('dragover', { + bubbles: true, + cancelable: true, + dataTransfer, + clientX: 500, + clientY: 100, + }) + + const dragOverResult = targetContainer.dispatchEvent(dragOverEvent) + results.push( + `Dragover result: ${dragOverResult}, prevented: ${dragOverEvent.defaultPrevented}` + ) + results.push( + `Dragover dropEffect: ${dragOverEvent.dataTransfer?.dropEffect}` + ) + + // 4. Dispatch drop on target + results.push('Dispatching drop...') + const dropEvent = new DragEvent('drop', { + bubbles: true, + cancelable: true, + dataTransfer, + clientX: 500, + clientY: 100, + }) + + const dropResult = targetContainer.dispatchEvent(dropEvent) + results.push( + `Drop result: ${dropResult}, prevented: ${dropEvent.defaultPrevented}` + ) + + // 5. Dispatch dragend on source + results.push('Dispatching dragend...') + const dragEndEvent = new DragEvent('dragend', { + bubbles: true, + cancelable: true, + dataTransfer, + clientX: 500, + clientY: 100, + }) + + const dragEndResult = sourceItem.dispatchEvent(dragEndEvent) + results.push( + `Dragend result: ${dragEndResult}, prevented: ${dragEndEvent.defaultPrevented}` + ) + } catch (e) { + results.push(`Error: ${e}`) + } + + return { results, error: null } + }) + + await page.waitForTimeout(500) + + console.log('Manual sequence results:') + if (manualSequenceResult.error) { + console.log('Error:', manualSequenceResult.error) + } else { + manualSequenceResult.results.forEach((result) => { + console.log(` ${result}`) + }) + } + + // Check final state + const finalState = await page.evaluate(() => { + return { + list1: Array.from( + document.querySelectorAll('#multi-1 .horizontal-item') + ).map((el) => el.textContent?.trim()), + list2: Array.from( + document.querySelectorAll('#multi-2 .horizontal-item') + ).map((el) => el.textContent?.trim()), + } + }) + + console.log('Final state after manual events:') + console.log(' List 1:', finalState.list1) + console.log(' List 2:', finalState.list2) + + const worked = + finalState.list1.length !== 3 || finalState.list2.length !== 3 + console.log('Manual sequence worked:', worked) + + if (!worked) { + console.log('❌ Even manual event sequence did not work') + + // Check for specific error messages + const errorLogs = logs.filter( + (log) => + log.includes('error') || + log.includes('Error') || + log.includes('fail') || + log.includes('prevent') + ) + + if (errorLogs.length > 0) { + console.log('Error messages found:') + errorLogs.forEach((log) => console.log(` ${log}`)) + } + } + }) +}) diff --git a/tests/e2e/debug-inline-events.spec.ts b/tests/e2e/debug-inline-events.spec.ts new file mode 100644 index 0000000..032399e --- /dev/null +++ b/tests/e2e/debug-inline-events.spec.ts @@ -0,0 +1,179 @@ +import { test } from '@playwright/test' + +test.describe('Debug Inline-block Events', () => { + test('check event listeners on inline-block items', async ({ page }) => { + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + // Inject event monitoring + await page.evaluate(() => { + const container = document.querySelector('#inline-list') + const items = container?.querySelectorAll('.inline-item') + + if (items) { + items.forEach((item, index) => { + const el = item as HTMLElement + + // Track all drag events + el.addEventListener('dragstart', (e) => { + console.log(`[Item ${index}] dragstart triggered`) + console.log(` - draggable: ${el.draggable}`) + console.log(` - dataTransfer: ${e.dataTransfer}`) + }) + + el.addEventListener('dragend', (_e) => { + console.log(`[Item ${index}] dragend triggered`) + }) + + el.addEventListener('mousedown', (e) => { + console.log( + `[Item ${index}] mousedown at (${e.clientX}, ${e.clientY})` + ) + }) + + el.addEventListener('mouseup', (e) => { + console.log( + `[Item ${index}] mouseup at (${e.clientX}, ${e.clientY})` + ) + }) + }) + } + + // Also monitor container events + if (container) { + container.addEventListener('dragover', (_e) => { + console.log('[Container] dragover') + }) + + container.addEventListener('drop', (_e) => { + console.log('[Container] drop') + }) + } + }) + + // Capture console logs + const logs: string[] = [] + page.on('console', (msg) => { + logs.push(msg.text()) + }) + + // Try to drag the first item + const firstItem = page.locator('#inline-list .inline-item').first() + const thirdItem = page.locator('#inline-list .inline-item').nth(2) + + console.log('Attempting drag with mouse events...') + + // Get positions + const firstBox = await firstItem.boundingBox() + const thirdBox = await thirdItem.boundingBox() + + if (firstBox && thirdBox) { + // Mouse down on first item + await page.mouse.move( + firstBox.x + firstBox.width / 2, + firstBox.y + firstBox.height / 2 + ) + await page.mouse.down() + + // Wait to see if dragstart fires + await page.waitForTimeout(200) + + // Move to third item + await page.mouse.move( + thirdBox.x + thirdBox.width / 2, + thirdBox.y + thirdBox.height / 2, + { steps: 5 } + ) + + // Wait + await page.waitForTimeout(200) + + // Release + await page.mouse.up() + + // Wait for events to fire + await page.waitForTimeout(500) + } + + // Print all logs + console.log('\n=== Event Logs ===') + logs.forEach((log) => console.log(log)) + + // Check if dragstart was triggered + const dragstartFired = logs.some((log) => log.includes('dragstart')) + const dragendFired = logs.some((log) => log.includes('dragend')) + const mousedownFired = logs.some((log) => log.includes('mousedown')) + + console.log('\n=== Event Summary ===') + console.log(`mousedown fired: ${mousedownFired}`) + console.log(`dragstart fired: ${dragstartFired}`) + console.log(`dragend fired: ${dragendFired}`) + + // If dragstart didn't fire, try with Playwright's dragTo + if (!dragstartFired) { + console.log('\n=== Trying Playwright dragTo ===') + logs.length = 0 // Clear logs + + await firstItem.dragTo(thirdItem) + await page.waitForTimeout(500) + + console.log('Logs after dragTo:') + logs.forEach((log) => console.log(log)) + } + }) + + test('compare event firing between working and non-working', async ({ + page, + }) => { + // Test working version + console.log('=== WORKING version (test-inline-block-bug.html) ===') + await page.goto( + 'http://localhost:5173/html-tests/test-inline-block-bug.html' + ) + await page.waitForLoadState('networkidle') + + let logs: string[] = [] + page.on('console', (msg) => logs.push(msg.text())) + + // Try drag on working version + const workingFirst = page.locator('#inline-container .inline-item').first() + const workingThird = page.locator('#inline-container .inline-item').nth(2) + + await workingFirst.hover() + await page.mouse.down() + await page.waitForTimeout(100) + await workingThird.hover() + await page.waitForTimeout(100) + await page.mouse.up() + await page.waitForTimeout(500) + + const workingLogs = [...logs] + console.log('Working version logs:') + workingLogs.forEach((log) => console.log(' ', log)) + + // Test non-working version + console.log('\n=== NON-WORKING version (test-horizontal-list.html) ===') + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + logs = [] + + const nonWorkingFirst = page.locator('#inline-list .inline-item').first() + const nonWorkingThird = page.locator('#inline-list .inline-item').nth(2) + + await nonWorkingFirst.hover() + await page.mouse.down() + await page.waitForTimeout(100) + await nonWorkingThird.hover() + await page.waitForTimeout(100) + await page.mouse.up() + await page.waitForTimeout(500) + + console.log('Non-working version logs:') + logs.forEach((log) => console.log(' ', log)) + }) +}) diff --git a/tests/e2e/debug-startdrag-call.spec.ts b/tests/e2e/debug-startdrag-call.spec.ts new file mode 100644 index 0000000..b94b3a9 --- /dev/null +++ b/tests/e2e/debug-startdrag-call.spec.ts @@ -0,0 +1,313 @@ +import { test, expect } from '@playwright/test' + +test.describe('Debug StartDrag Call', () => { + test('trace startDrag call and canAcceptDrop logic', async ({ page }) => { + console.log('\n=== Trace StartDrag Call ===') + + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + const logs: string[] = [] + page.on('console', (msg) => { + const text = msg.text() + logs.push(text) + console.log(`[CONSOLE] ${text}`) + }) + + // Create a very detailed trace of what happens in dragstart and dragover + await page.evaluate(() => { + const multi1 = document.getElementById('multi-1') + const multi2 = document.getElementById('multi-2') + + if (!multi1 || multi2) { + // Get the first item for testing + const firstItem = multi1?.querySelector( + '.horizontal-item:first-child' + ) as HTMLElement + + if (firstItem) { + console.log('[TRACE] Setting up dragstart tracer...') + console.log(`[TRACE] First item: ${firstItem.textContent}`) + console.log(`[TRACE] First item draggable: ${firstItem.draggable}`) + console.log( + `[TRACE] First item parent: ${firstItem.parentElement?.id}` + ) + console.log( + `[TRACE] Draggable selector would match: ${firstItem.matches('.horizontal-item')}` + ) + + // Manually trace the onDragStart conditions + multi1?.addEventListener( + 'dragstart', + (e) => { + console.log('[DRAGSTART_TRACE] Event received') + + const target = (e.target as HTMLElement)?.closest( + '.horizontal-item' + ) as HTMLElement + console.log( + `[DRAGSTART_TRACE] Target after closest: ${target?.textContent}` + ) + console.log( + `[DRAGSTART_TRACE] Target parent: ${target?.parentElement?.id}` + ) + console.log( + `[DRAGSTART_TRACE] Parent matches multi-1: ${target?.parentElement === multi1}` + ) + + if (target && target.parentElement === multi1) { + console.log('[DRAGSTART_TRACE] ✅ Target validation passed') + + // Check if the element is draggable + console.log( + `[DRAGSTART_TRACE] Target draggable: ${target.draggable}` + ) + console.log( + `[DRAGSTART_TRACE] Target matches .horizontal-item: ${target.matches('.horizontal-item')}` + ) + + // Check dataTransfer + if (e.dataTransfer) { + console.log('[DRAGSTART_TRACE] ✅ DataTransfer exists') + console.log( + `[DRAGSTART_TRACE] DataTransfer types: ${Array.from(e.dataTransfer.types)}` + ) + console.log( + `[DRAGSTART_TRACE] DataTransfer effectAllowed: ${e.dataTransfer.effectAllowed}` + ) + } else { + console.log('[DRAGSTART_TRACE] ❌ No DataTransfer') + } + + // Since we can't access the actual DragManager, simulate what it should do + console.log( + '[DRAGSTART_TRACE] This should trigger startDrag with:' + ) + console.log(' - dragId: html5-drag') + console.log(' - target:', target.textContent) + console.log(' - fromZone: multi-1') + console.log(' - groupName: shared-horizontal') + } else { + console.log('[DRAGSTART_TRACE] ❌ Target validation failed') + } + }, + true + ) + + // Trace dragover conditions + multi2?.addEventListener( + 'dragover', + (e) => { + console.log('[DRAGOVER_TRACE] Event received on multi-2') + console.log( + `[DRAGOVER_TRACE] DataTransfer exists: ${!!e.dataTransfer}` + ) + console.log( + `[DRAGOVER_TRACE] DataTransfer types: ${e.dataTransfer ? Array.from(e.dataTransfer.types) : 'none'}` + ) + + // Simulate the canAcceptDrop check + console.log('[DRAGOVER_TRACE] Simulating canAcceptDrop check:') + console.log(' - dragId: html5-drag') + console.log(' - targetGroupName: shared-horizontal') + console.log( + ' - Expected: activeDrag should exist for html5-drag' + ) + console.log( + ' - Expected: activeDrag.groupName should be shared-horizontal' + ) + console.log( + ' - Expected: shared-horizontal === shared-horizontal should return true' + ) + + // Check if preventDefault was called BEFORE this handler + console.log( + `[DRAGOVER_TRACE] Default prevented before handler: ${e.defaultPrevented}` + ) + + setTimeout(() => { + console.log( + `[DRAGOVER_TRACE] Default prevented after handler: ${e.defaultPrevented}` + ) + console.log( + `[DRAGOVER_TRACE] DropEffect after handler: ${e.dataTransfer?.dropEffect}` + ) + }, 1) + }, + true + ) + } + } + }) + + // Test the exact sequence + console.log('\n=== Testing Exact Sequence ===') + + const testResult = await page.evaluate(() => { + const firstItem = document.querySelector( + '#multi-1 .horizontal-item:first-child' + ) as HTMLElement + const multi2 = document.getElementById('multi-2') + + if (!firstItem || !multi2) { + return { error: 'Elements not found' } + } + + // Create a proper drag event that should pass all validations + const dataTransfer = new DataTransfer() + dataTransfer.setData('text/plain', 'sortable-item') + dataTransfer.effectAllowed = 'move' + + console.log('[TEST] Creating dragstart event...') + const dragStartEvent = new DragEvent('dragstart', { + bubbles: true, + cancelable: true, + dataTransfer, + clientX: 100, + clientY: 100, + }) + + // Make sure the event target is exactly what DragManager expects + Object.defineProperty(dragStartEvent, 'target', { + value: firstItem, + writable: false, + }) + + console.log('[TEST] Dispatching dragstart...') + const dragStartResult = firstItem.dispatchEvent(dragStartEvent) + + // Wait a bit, then test dragover + setTimeout(() => { + console.log('[TEST] Creating dragover event...') + const dragOverEvent = new DragEvent('dragover', { + bubbles: true, + cancelable: true, + dataTransfer, + clientX: 500, + clientY: 100, + }) + + Object.defineProperty(dragOverEvent, 'target', { + value: multi2, + writable: false, + }) + + console.log('[TEST] Dispatching dragover...') + const dragOverResult = multi2.dispatchEvent(dragOverEvent) + + console.log(`[TEST] Dragover result: ${dragOverResult}`) + console.log( + `[TEST] Dragover prevented: ${dragOverEvent.defaultPrevented}` + ) + console.log( + `[TEST] Final dropEffect: ${dragOverEvent.dataTransfer?.dropEffect}` + ) + }, 50) + + return { + dragStartResult, + dragStartPrevented: dragStartEvent.defaultPrevented, + error: null, + } + }) + + await page.waitForTimeout(500) + + console.log('Test result:', testResult) + + // Show all trace logs + console.log('\n=== Trace Logs ===') + const traceLogs = logs.filter( + (log) => + log.includes('[DRAGSTART_TRACE]') || + log.includes('[DRAGOVER_TRACE]') || + log.includes('[TEST]') + ) + traceLogs.forEach((log) => console.log(` ${log}`)) + + expect(testResult.error).toBeNull() + }) + + test('test with real mouse drag to compare', async ({ page }) => { + console.log('\n=== Real Mouse Drag Test ===') + + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + const logs: string[] = [] + page.on('console', (msg) => { + const text = msg.text() + logs.push(text) + if (text.includes('[MOUSE]') || text.includes('dropEffect')) { + console.log(`[CONSOLE] ${text}`) + } + }) + + // Add logging for real mouse events + await page.evaluate(() => { + const multi1 = document.getElementById('multi-1') + const multi2 = document.getElementById('multi-2') + + ;[multi1, multi2].forEach((container) => { + if (!container) return + ;['dragstart', 'dragover', 'drop', 'dragend'].forEach((eventName) => { + container.addEventListener( + eventName, + (e) => { + const dragEvent = e as DragEvent + console.log(`[MOUSE] ${eventName} on ${container.id}`) + console.log( + `[MOUSE] dropEffect: ${dragEvent.dataTransfer?.dropEffect}` + ) + console.log(`[MOUSE] prevented: ${e.defaultPrevented}`) + }, + true + ) + }) + }) + }) + + // Try a real mouse drag + const sourceItem = page.locator('#multi-1 .horizontal-item').first() + const targetContainer = page.locator('#multi-2') + + console.log('Attempting real mouse drag...') + + try { + // Use dragTo which should trigger real browser drag events + await sourceItem.dragTo(targetContainer) + await page.waitForTimeout(100) + } catch (e) { + console.log('dragTo failed:', e) + } + + // Check what happened + const afterMouseDrag = await page.evaluate(() => { + return { + list1Count: document.querySelectorAll('#multi-1 .horizontal-item') + .length, + list2Count: document.querySelectorAll('#multi-2 .horizontal-item') + .length, + } + }) + + console.log('After mouse drag:') + console.log(` List 1 count: ${afterMouseDrag.list1Count}`) + console.log(` List 2 count: ${afterMouseDrag.list2Count}`) + + const mouseDragWorked = + afterMouseDrag.list1Count !== 3 || afterMouseDrag.list2Count !== 3 + console.log('Mouse drag worked:', mouseDragWorked) + + // Show mouse event logs + console.log('\n=== Mouse Event Logs ===') + const mouseLogs = logs.filter((log) => log.includes('[MOUSE]')) + mouseLogs.forEach((log) => console.log(` ${log}`)) + + expect(afterMouseDrag.list1Count + afterMouseDrag.list2Count).toBe(6) + }) +}) diff --git a/tests/e2e/debug-startdrag-registration.spec.ts b/tests/e2e/debug-startdrag-registration.spec.ts new file mode 100644 index 0000000..0a0ee2c --- /dev/null +++ b/tests/e2e/debug-startdrag-registration.spec.ts @@ -0,0 +1,298 @@ +import { test, expect } from '@playwright/test' + +test.describe('Debug StartDrag Registration', () => { + test('verify globalDragState.startDrag is called and debug group compatibility', async ({ + page, + }) => { + console.log('\n=== Debug StartDrag Registration ===') + + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + const logs: string[] = [] + page.on('console', (msg) => { + const text = msg.text() + logs.push(text) + console.log(`[CONSOLE] ${text}`) + }) + + // Inject debugging code into the page + await page.evaluate(() => { + // Try to expose debugging hooks on the global scope + const sortableScript = document.querySelector('script[type="module"]') + if (sortableScript) { + console.log('Found module script') + } + + // Add detailed logging to dragstart and dragover events + const multi1 = document.getElementById('multi-1') + const multi2 = document.getElementById('multi-2') + + if (multi1 && multi2) { + console.log('Setting up detailed event logging...') + + // Hook into dragstart to see what happens + multi1.addEventListener( + 'dragstart', + (e) => { + console.log('[DRAGSTART_DEBUG] Event fired on multi-1') + console.log(' - target:', (e.target as HTMLElement)?.textContent) + console.log( + ' - currentTarget:', + (e.currentTarget as HTMLElement)?.id + ) + console.log(' - dataTransfer exists:', !!e.dataTransfer) + + // Try to hook into the DragManager's onDragStart + setTimeout(() => { + console.log('[DRAGSTART_DEBUG] Checking after dragstart...') + + // Check if elements have been marked as being dragged + const items = multi1.querySelectorAll('.horizontal-item') + items.forEach((item, index) => { + const htmlItem = item as HTMLElement + console.log( + ` - Item ${index}: classes = ${htmlItem.className}` + ) + console.log(` opacity = ${htmlItem.style.opacity}`) + console.log(` draggable = ${htmlItem.draggable}`) + }) + }, 10) + }, + true + ) + + // Hook into dragover to see what happens + multi2.addEventListener( + 'dragover', + (e) => { + console.log('[DRAGOVER_DEBUG] Event fired on multi-2') + console.log(' - dataTransfer exists:', !!e.dataTransfer) + console.log( + ' - dataTransfer.types:', + e.dataTransfer ? Array.from(e.dataTransfer.types) : 'none' + ) + console.log(' - defaultPrevented (before):', e.defaultPrevented) + + // Check dropEffect before and after the handler + if (e.dataTransfer) { + console.log( + ' - dropEffect (before handler):', + e.dataTransfer.dropEffect + ) + } + + setTimeout(() => { + console.log('[DRAGOVER_DEBUG] After dragover handler:') + if (e.dataTransfer) { + console.log( + ' - dropEffect (after handler):', + e.dataTransfer.dropEffect + ) + } + console.log(' - defaultPrevented (after):', e.defaultPrevented) + }, 1) + }, + true + ) + + // Also try to hook into the DragManager methods if possible + // This is tricky because they're in module scope, but we can try to monkey-patch + const originalPreventDefault = Event.prototype.preventDefault + Event.prototype.preventDefault = function () { + if (this.type?.includes('drag')) { + console.log(`[PREVENT_DEFAULT] Called on ${this.type}`) + } + return originalPreventDefault.call(this) + } + } + }) + + // Test 1: Try a controlled drag sequence + console.log('\n=== Test 1: Manual Drag Events ===') + + const dragResult = await page.evaluate(() => { + const sourceItem = document.querySelector( + '#multi-1 .horizontal-item:first-child' + ) as HTMLElement + const targetContainer = document.querySelector('#multi-2') as HTMLElement + + if (!sourceItem || !targetContainer) { + return { error: 'Elements not found' } + } + + const results: string[] = [] + + // Create DataTransfer object + const dataTransfer = new DataTransfer() + dataTransfer.setData('text/plain', 'sortable-item') + dataTransfer.effectAllowed = 'move' + + // 1. Fire dragstart + console.log('[MANUAL_DRAG] Firing dragstart...') + const dragStartEvent = new DragEvent('dragstart', { + bubbles: true, + cancelable: true, + dataTransfer, + clientX: 100, + clientY: 100, + }) + + sourceItem.dispatchEvent(dragStartEvent) + results.push( + `dragstart dispatched, prevented: ${dragStartEvent.defaultPrevented}` + ) + + // Small delay then fire dragover + setTimeout(() => { + console.log('[MANUAL_DRAG] Firing dragover...') + const dragOverEvent = new DragEvent('dragover', { + bubbles: true, + cancelable: true, + dataTransfer, + clientX: 500, + clientY: 100, + }) + + targetContainer.dispatchEvent(dragOverEvent) + results.push( + `dragover dispatched, prevented: ${dragOverEvent.defaultPrevented}` + ) + results.push( + `dragover dropEffect: ${dragOverEvent.dataTransfer?.dropEffect}` + ) + + // Fire drop + setTimeout(() => { + console.log('[MANUAL_DRAG] Firing drop...') + const dropEvent = new DragEvent('drop', { + bubbles: true, + cancelable: true, + dataTransfer, + clientX: 500, + clientY: 100, + }) + + targetContainer.dispatchEvent(dropEvent) + results.push( + `drop dispatched, prevented: ${dropEvent.defaultPrevented}` + ) + + // Fire dragend + setTimeout(() => { + console.log('[MANUAL_DRAG] Firing dragend...') + const dragEndEvent = new DragEvent('dragend', { + bubbles: true, + cancelable: true, + dataTransfer, + }) + + sourceItem.dispatchEvent(dragEndEvent) + results.push( + `dragend dispatched, prevented: ${dragEndEvent.defaultPrevented}` + ) + }, 10) + }, 10) + }, 10) + + return { results, error: null } + }) + + await page.waitForTimeout(500) + + console.log('Manual drag results:') + if (dragResult.error) { + console.log('Error:', dragResult.error) + } else { + dragResult.results?.forEach((result) => console.log(` ${result}`)) + } + + // Test 2: Try real browser drag + console.log('\n=== Test 2: Real Browser Drag ===') + + const sourceItem = page.locator('#multi-1 .horizontal-item').first() + const targetContainer = page.locator('#multi-2') + + try { + await sourceItem.dragTo(targetContainer) + await page.waitForTimeout(300) + } catch (e) { + console.log('Real drag failed:', e) + } + + // Check the results + const finalState = await page.evaluate(() => { + return { + list1: Array.from( + document.querySelectorAll('#multi-1 .horizontal-item') + ).map((el) => el.textContent?.trim()), + list2: Array.from( + document.querySelectorAll('#multi-2 .horizontal-item') + ).map((el) => el.textContent?.trim()), + } + }) + + console.log('\n=== Final Results ===') + console.log('List 1:', finalState.list1) + console.log('List 2:', finalState.list2) + + const manualWorked = + finalState.list1.length !== 3 || finalState.list2.length !== 3 + console.log('Cross-container drag worked:', manualWorked) + + // Show relevant logs + console.log('\n=== Relevant Logs ===') + const relevantLogs = logs.filter( + (log) => + log.includes('[DRAGSTART_DEBUG]') || + log.includes('[DRAGOVER_DEBUG]') || + log.includes('[MANUAL_DRAG]') || + log.includes('[PREVENT_DEFAULT]') || + log.includes('dropEffect') + ) + relevantLogs.forEach((log) => console.log(` ${log}`)) + + // Basic test - should not crash + expect( + finalState.list1.length + finalState.list2.length + ).toBeGreaterThanOrEqual(6) + }) + + test('test group compatibility directly', async ({ page }) => { + console.log('\n=== Test Group Compatibility ===') + + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + // Test the exact group names and compatibility + const groupTest = await page.evaluate(() => { + const multi1 = document.getElementById('multi-1') + const multi2 = document.getElementById('multi-2') + + if (!multi1 || !multi2) { + return { error: 'Elements not found' } + } + + return { + multi1Group: multi1.dataset.sortableGroup, + multi2Group: multi2.dataset.sortableGroup, + groupsMatch: + multi1.dataset.sortableGroup === multi2.dataset.sortableGroup, + multi1DropZone: multi1.dataset.dropZone, + multi2DropZone: multi2.dataset.dropZone, + multi1Classes: Array.from(multi1.classList), + multi2Classes: Array.from(multi2.classList), + } + }) + + console.log('Group compatibility test:', JSON.stringify(groupTest, null, 2)) + + expect(groupTest.groupsMatch).toBe(true) + expect(groupTest.multi1Group).toBe('shared-horizontal') + expect(groupTest.multi2Group).toBe('shared-horizontal') + }) +}) diff --git a/tests/e2e/debug-with-logging.spec.ts b/tests/e2e/debug-with-logging.spec.ts new file mode 100644 index 0000000..9fff71d --- /dev/null +++ b/tests/e2e/debug-with-logging.spec.ts @@ -0,0 +1,114 @@ +import { test, expect } from '@playwright/test' + +test.describe('Debug with Logging', () => { + test('trace dragstart and dragover with debug logging', async ({ page }) => { + console.log('\n=== Debug with Logging ===') + + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + const logs: string[] = [] + page.on('console', (msg) => { + const text = msg.text() + logs.push(text) + if (text.includes('[DEBUG_')) { + console.log(`[CONSOLE] ${text}`) + } + }) + + // Test 1: Manual event to see debug output + console.log('\n=== Manual Event Test ===') + + const manualResult = await page.evaluate(() => { + const sourceItem = document.querySelector( + '#multi-1 .horizontal-item:first-child' + ) as HTMLElement + const targetContainer = document.querySelector('#multi-2') as HTMLElement + + if (!sourceItem || !targetContainer) { + return { error: 'Elements not found' } + } + + const dataTransfer = new DataTransfer() + dataTransfer.setData('text/plain', 'sortable-item') + dataTransfer.effectAllowed = 'move' + + // Dispatch dragstart + console.log('[MANUAL] Dispatching dragstart...') + const dragStartEvent = new DragEvent('dragstart', { + bubbles: true, + cancelable: true, + dataTransfer, + clientX: 100, + clientY: 100, + }) + + sourceItem.dispatchEvent(dragStartEvent) + + // Wait a bit, then dispatch dragover + setTimeout(() => { + console.log('[MANUAL] Dispatching dragover...') + const dragOverEvent = new DragEvent('dragover', { + bubbles: true, + cancelable: true, + dataTransfer, + clientX: 500, + clientY: 100, + }) + + targetContainer.dispatchEvent(dragOverEvent) + }, 10) + + return { error: null } + }) + + await page.waitForTimeout(500) + + console.log('Manual test result:', manualResult) + + // Test 2: Playwright dragTo + console.log('\n=== Playwright dragTo Test ===') + + const sourceItem = page.locator('#multi-1 .horizontal-item').first() + const targetContainer = page.locator('#multi-2') + + try { + await sourceItem.dragTo(targetContainer) + await page.waitForTimeout(200) + } catch (e) { + console.log('dragTo failed:', e) + } + + // Show all debug logs + console.log('\n=== Debug Logs ===') + const debugLogs = logs.filter( + (log) => log.includes('[DEBUG_') || log.includes('[MANUAL]') + ) + debugLogs.forEach((log) => console.log(` ${log}`)) + + // Check final state + const finalState = await page.evaluate(() => { + return { + list1: Array.from( + document.querySelectorAll('#multi-1 .horizontal-item') + ).map((el) => el.textContent?.trim()), + list2: Array.from( + document.querySelectorAll('#multi-2 .horizontal-item') + ).map((el) => el.textContent?.trim()), + } + }) + + console.log('\n=== Final State ===') + console.log('List 1:', finalState.list1) + console.log('List 2:', finalState.list2) + + const worked = + finalState.list1.length !== 3 || finalState.list2.length !== 3 + console.log('Cross-container drag worked:', worked) + + // The test should not fail, we just want to see the debug output + expect(manualResult.error).toBeNull() + }) +}) diff --git a/tests/e2e/empty-container-simple.spec.ts b/tests/e2e/empty-container-simple.spec.ts new file mode 100644 index 0000000..408ee8e --- /dev/null +++ b/tests/e2e/empty-container-simple.spec.ts @@ -0,0 +1,83 @@ +import { test, expect } from '@playwright/test' + +test.describe('Simple Empty Container Test', () => { + test('should allow dragging items into an empty container', async ({ + page, + }) => { + // Navigate to the simple test page + await page.goto( + 'http://localhost:5173/html-tests/test-empty-container.html' + ) + + // Wait for Sortable to initialize + await page.waitForSelector('#container1') + await page.waitForTimeout(200) + + // Get initial counts + const sourceItems = page.locator('#container1 .item') + const emptyItems = page.locator('#container2 .item') + + // Verify initial state + await expect(sourceItems).toHaveCount(3) + await expect(emptyItems).toHaveCount(0) + + // Get the first item + const firstItem = sourceItems.first() + const itemText = await firstItem.textContent() + + // Get the empty container + const emptyContainer = page.locator('#container2') + + // Perform the drag and drop + await firstItem.dragTo(emptyContainer) + + // Wait for animation + await page.waitForTimeout(300) + + // Verify the item was moved + await expect(sourceItems).toHaveCount(2) + await expect(emptyItems).toHaveCount(1) + + // Verify it's the correct item + const movedItem = emptyItems.first() + await expect(movedItem).toHaveText(itemText!) + + // Verify we can drag another item + const secondItem = sourceItems.first() + await secondItem.dragTo(emptyContainer) + await page.waitForTimeout(300) + + // Verify both items moved + await expect(sourceItems).toHaveCount(1) + await expect(emptyItems).toHaveCount(2) + }) + + test('should allow dragging items back from previously empty container', async ({ + page, + }) => { + await page.goto( + 'http://localhost:5173/html-tests/test-empty-container.html' + ) + + // Wait for initialization + await page.waitForSelector('#container1') + await page.waitForTimeout(200) + + const sourceContainer = page.locator('#container1') + const emptyContainer = page.locator('#container2') + const sourceItems = sourceContainer.locator('.item') + const emptyItems = emptyContainer.locator('.item') + + // Move item to empty container + await sourceItems.first().dragTo(emptyContainer) + await page.waitForTimeout(300) + + // Now drag it back + await emptyItems.first().dragTo(sourceContainer) + await page.waitForTimeout(300) + + // Verify item returned + await expect(sourceItems).toHaveCount(3) + await expect(emptyItems).toHaveCount(0) + }) +}) diff --git a/tests/e2e/empty-container.spec.ts b/tests/e2e/empty-container.spec.ts new file mode 100644 index 0000000..b90830c --- /dev/null +++ b/tests/e2e/empty-container.spec.ts @@ -0,0 +1,179 @@ +import { test, expect } from '@playwright/test' + +test.describe('Empty Container Drops', () => { + test.beforeEach(async ({ page }) => { + await page.goto('http://localhost:5173/demo-features.html') + + // Wait for the page to be fully loaded + await page.waitForSelector('#nested-vertical-list') + + // Scroll to the nested section + await page.evaluate(() => { + document + .querySelector('#nested-vertical-list') + ?.scrollIntoView({ behavior: 'instant', block: 'center' }) + }) + }) + + test('should allow dropping items into empty containers', async ({ + page, + }) => { + // Get initial state + const dashboardItems = page + .locator('.nested-container') + .filter({ hasText: 'Dashboard Widgets' }) + .locator('.horizontal-item') + const emptyContainer = page + .locator('.nested-container') + .filter({ hasText: 'Empty Section' }) + .locator('.horizontal-list') + + // Verify initial state + await expect(dashboardItems).toHaveCount(5) + await expect(emptyContainer.locator('.horizontal-item')).toHaveCount(0) + + // Get the first item from Dashboard Widgets + const firstItem = dashboardItems.first() + const itemText = await firstItem.textContent() + + // Drag the first item to the empty container + await firstItem.dragTo(emptyContainer) + + // Wait for animation to complete + await page.waitForTimeout(300) + + // Verify the item was moved + await expect(dashboardItems).toHaveCount(4) + await expect(emptyContainer.locator('.horizontal-item')).toHaveCount(1) + + // Verify it's the correct item + const movedItem = emptyContainer.locator('.horizontal-item').first() + await expect(movedItem).toHaveText(itemText!) + }) + + test('should show placeholder when dragging over empty container', async ({ + page, + }) => { + // Get elements + const firstItem = page + .locator('.nested-container') + .filter({ hasText: 'Dashboard Widgets' }) + .locator('.horizontal-item') + .first() + const emptyContainer = page + .locator('.nested-container') + .filter({ hasText: 'Empty Section' }) + .locator('.horizontal-list') + + // Start dragging + await firstItem.hover() + await page.mouse.down() + await page.mouse.move(100, 100) // Move to trigger drag start + + // Move over empty container + const emptyBox = await emptyContainer.boundingBox() + if (emptyBox) { + await page.mouse.move( + emptyBox.x + emptyBox.width / 2, + emptyBox.y + emptyBox.height / 2 + ) + + // Check for placeholder + const placeholder = emptyContainer.locator('.sortable-placeholder') + await expect(placeholder).toBeVisible() + } + + // Release the drag + await page.mouse.up() + }) + + test('should allow dropping multiple items into empty container', async ({ + page, + }) => { + // Get elements + const dashboardContainer = page + .locator('.nested-container') + .filter({ hasText: 'Dashboard Widgets' }) + const dashboardItems = dashboardContainer.locator('.horizontal-item') + const emptyContainer = page + .locator('.nested-container') + .filter({ hasText: 'Empty Section' }) + .locator('.horizontal-list') + + // Verify initial state + await expect(dashboardItems).toHaveCount(5) + await expect(emptyContainer.locator('.horizontal-item')).toHaveCount(0) + + // Drag first item + await dashboardItems.nth(0).dragTo(emptyContainer) + await page.waitForTimeout(300) + + // Verify first item moved + await expect(dashboardItems).toHaveCount(4) + await expect(emptyContainer.locator('.horizontal-item')).toHaveCount(1) + + // Drag second item + await dashboardItems.nth(0).dragTo(emptyContainer) + await page.waitForTimeout(300) + + // Verify second item moved + await expect(dashboardContainer.locator('.horizontal-item')).toHaveCount(3) + await expect(emptyContainer.locator('.horizontal-item')).toHaveCount(2) + }) + + test('should allow dragging items between empty containers', async ({ + page, + }) => { + // First, create two empty containers by moving all items out + const dataProcessingContainer = page + .locator('.nested-container') + .filter({ hasText: 'Data Processing' }) + const dataProcessingItems = + dataProcessingContainer.locator('.horizontal-item') + const dashboardContainer = page + .locator('.nested-container') + .filter({ hasText: 'Dashboard Widgets' }) + .locator('.horizontal-list') + + // Move all Data Processing items to Dashboard + const itemCount = await dataProcessingItems.count() + for (let i = 0; i < itemCount; i++) { + await dataProcessingItems.first().dragTo(dashboardContainer) + await page.waitForTimeout(200) + } + + // Now both Data Processing and Empty Section are empty + const emptySection = page + .locator('.nested-container') + .filter({ hasText: 'Empty Section' }) + .locator('.horizontal-list') + const dataProcessingList = + dataProcessingContainer.locator('.horizontal-list') + + // Verify both are empty + await expect(dataProcessingList.locator('.horizontal-item')).toHaveCount(0) + await expect(emptySection.locator('.horizontal-item')).toHaveCount(0) + + // Move one item from Dashboard to Data Processing (now empty) + const dashboardItems = page + .locator('.nested-container') + .filter({ hasText: 'Dashboard Widgets' }) + .locator('.horizontal-item') + await dashboardItems.first().dragTo(dataProcessingList) + await page.waitForTimeout(300) + + // Verify item moved to previously empty container + await expect(dataProcessingList.locator('.horizontal-item')).toHaveCount(1) + + // Now drag from Data Processing to Empty Section (both were empty initially) + await dataProcessingList + .locator('.horizontal-item') + .first() + .dragTo(emptySection) + await page.waitForTimeout(300) + + // Verify item moved between previously empty containers + await expect(dataProcessingList.locator('.horizontal-item')).toHaveCount(0) + await expect(emptySection.locator('.horizontal-item')).toHaveCount(1) + }) +}) diff --git a/tests/e2e/inline-block-drag.spec.ts b/tests/e2e/inline-block-drag.spec.ts new file mode 100644 index 0000000..4bee55f --- /dev/null +++ b/tests/e2e/inline-block-drag.spec.ts @@ -0,0 +1,227 @@ +import { test } from '@playwright/test' + +test.describe('Inline-block Drag and Drop', () => { + test.beforeEach(async ({ page }) => { + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + }) + + test('should detect draggable items in inline-block list', async ({ + page, + }) => { + // Check if inline items are draggable + const inlineItems = await page.locator('#inline-list .inline-item').all() + console.log(`Found ${inlineItems.length} inline items`) + + for (let i = 0; i < inlineItems.length; i++) { + const item = inlineItems[i] + const text = await item.textContent() + const draggable = await item.evaluate( + (el) => (el as HTMLElement).draggable + ) + const display = await item.evaluate( + (el) => window.getComputedStyle(el).display + ) + console.log( + `Item ${i} (${text}): draggable=${draggable}, display=${display}` + ) + } + }) + + test('should drag inline-block items with native drag', async ({ page }) => { + const logs: string[] = [] + page.on('console', (msg) => { + const text = msg.text() + if ( + text.includes('Inline') || + text.includes('drag') || + text.includes('Drag') + ) { + logs.push(text) + } + }) + + // Get initial order + const initialOrder = await page + .locator('#inline-list .inline-item') + .allTextContents() + console.log('Initial order:', initialOrder) + + // Try to drag first item to third position + const firstItem = page.locator('#inline-list .inline-item').first() + const thirdItem = page.locator('#inline-list .inline-item').nth(2) + + // Check if items are draggable + const firstDraggable = await firstItem.evaluate( + (el) => (el as HTMLElement).draggable + ) + const firstDisplay = await firstItem.evaluate( + (el) => window.getComputedStyle(el).display + ) + console.log( + `First item: draggable=${firstDraggable}, display=${firstDisplay}` + ) + + // Get bounding boxes + const firstBox = await firstItem.boundingBox() + const thirdBox = await thirdItem.boundingBox() + + if (firstBox && thirdBox) { + console.log('Attempting drag...') + + // Move to first item + await page.mouse.move( + firstBox.x + firstBox.width / 2, + firstBox.y + firstBox.height / 2 + ) + + // Mouse down to start drag + await page.mouse.down() + + // Small delay to let drag start + await page.waitForTimeout(100) + + // Move to third item position (slowly) + await page.mouse.move( + thirdBox.x + thirdBox.width / 2, + thirdBox.y + thirdBox.height / 2, + { steps: 10 } + ) + + // Wait a bit before releasing + await page.waitForTimeout(100) + + // Release + await page.mouse.up() + + // Wait for any animations + await page.waitForTimeout(500) + } + + // Check final order + const finalOrder = await page + .locator('#inline-list .inline-item') + .allTextContents() + console.log('Final order:', finalOrder) + + // Check status message + const status = await page.locator('#status').textContent() + console.log('Status:', status) + + // Log all console messages + console.log('Console logs during drag:') + logs.forEach((log) => console.log(' -', log)) + + // Check if order changed + const orderChanged = + JSON.stringify(initialOrder) !== JSON.stringify(finalOrder) + console.log('Order changed:', orderChanged) + + // The test should show if drag worked + if (!orderChanged && status?.includes('Moved from position')) { + const match = status.match(/Moved from position (\d+) to (\d+)/) + if (match && match[1] === match[2]) { + console.log('ISSUE: Drag ended immediately (same position)') + } + } + }) + + test('compare working vs non-working inline-block', async ({ page }) => { + // First test the working one + await page.goto( + 'http://localhost:5173/html-tests/test-inline-block-bug.html' + ) + await page.waitForLoadState('networkidle') + + console.log('=== Testing WORKING inline-block (Test 1) ===') + const workingItems = await page + .locator('#inline-container .inline-item') + .all() + for (let i = 0; i < Math.min(2, workingItems.length); i++) { + const item = workingItems[i] + const draggable = await item.evaluate( + (el) => (el as HTMLElement).draggable + ) + const styles = await item.evaluate((el) => { + const computed = window.getComputedStyle(el) + return { + display: computed.display, + background: computed.background, + transition: computed.transition, + transform: computed.transform, + } + }) + console.log(`Working item ${i}: draggable=${draggable}`) + console.log(' Styles:', JSON.stringify(styles, null, 2)) + } + + // Now test the non-working one + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + console.log('\n=== Testing NON-WORKING inline-block (Test 3) ===') + const nonWorkingItems = await page + .locator('#inline-list .inline-item') + .all() + for (let i = 0; i < Math.min(2, nonWorkingItems.length); i++) { + const item = nonWorkingItems[i] + const draggable = await item.evaluate( + (el) => (el as HTMLElement).draggable + ) + const styles = await item.evaluate((el) => { + const computed = window.getComputedStyle(el) + return { + display: computed.display, + background: computed.background, + transition: computed.transition, + transform: computed.transform, + } + }) + console.log(`Non-working item ${i}: draggable=${draggable}`) + console.log(' Styles:', JSON.stringify(styles, null, 2)) + } + + // Check parent container differences + console.log('\n=== Container differences ===') + + await page.goto( + 'http://localhost:5173/html-tests/test-inline-block-bug.html' + ) + const workingContainer = await page + .locator('#inline-container') + .evaluate((el) => { + const computed = window.getComputedStyle(el) + return { + display: computed.display, + overflow: computed.overflow, + whiteSpace: computed.whiteSpace, + } + }) + console.log( + 'Working container styles:', + JSON.stringify(workingContainer, null, 2) + ) + + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + const nonWorkingContainer = await page + .locator('#inline-list') + .evaluate((el) => { + const computed = window.getComputedStyle(el) + return { + display: computed.display, + overflow: computed.overflow, + whiteSpace: computed.whiteSpace, + } + }) + console.log( + 'Non-working container styles:', + JSON.stringify(nonWorkingContainer, null, 2) + ) + }) +}) diff --git a/tests/e2e/manual-inline-test.spec.ts b/tests/e2e/manual-inline-test.spec.ts new file mode 100644 index 0000000..97318e0 --- /dev/null +++ b/tests/e2e/manual-inline-test.spec.ts @@ -0,0 +1,136 @@ +import { test } from '@playwright/test' + +test.describe('Manual Inline Test', () => { + test('manually trigger drag events', async ({ page }) => { + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + // Check what happens when we manually dispatch drag events + const result = await page.evaluate(() => { + const container = document.querySelector('#inline-list') + const firstItem = container?.querySelector('.inline-item') as HTMLElement + + if (!firstItem) return { error: 'No items found' } + + const logs: string[] = [] + + // Check initial state + logs.push(`Initial draggable: ${firstItem.draggable}`) + logs.push(`Display: ${window.getComputedStyle(firstItem).display}`) + + // Create a proper DataTransfer object + const dt = new DataTransfer() + dt.effectAllowed = 'move' + dt.setData('text/plain', 'test') + + // Try to dispatch dragstart + const dragStartEvent = new DragEvent('dragstart', { + bubbles: true, + cancelable: true, + dataTransfer: dt, + }) + + logs.push('Dispatching dragstart...') + const dragStartResult = firstItem.dispatchEvent(dragStartEvent) + logs.push(`dragstart dispatched, result: ${dragStartResult}`) + + // Check if any classes were added + logs.push(`Classes after dragstart: ${firstItem.className}`) + + // Dispatch dragend + const dragEndEvent = new DragEvent('dragend', { + bubbles: true, + cancelable: true, + dataTransfer: dt, + }) + + logs.push('Dispatching dragend...') + const dragEndResult = firstItem.dispatchEvent(dragEndEvent) + logs.push(`dragend dispatched, result: ${dragEndResult}`) + + return { logs, className: firstItem.className } + }) + + console.log('Manual dispatch results:') + if (result.logs) { + result.logs.forEach((log) => console.log(' ', log)) + } + + // Now check the console output from the page + const consoleLogs: string[] = [] + page.on('console', (msg) => { + if (msg.text().includes('Inline') || msg.text().includes('drag')) { + consoleLogs.push(msg.text()) + } + }) + + // Wait a bit and check status + await page.waitForTimeout(1000) + const status = await page.locator('#status').textContent() + console.log('\nStatus after manual dispatch:', status) + + if (consoleLogs.length > 0) { + console.log('\nConsole logs:') + consoleLogs.forEach((log) => console.log(' ', log)) + } + + // Try real mouse drag one more time with detailed logging + console.log('\n=== Attempting real drag ===') + + // Inject detailed logging + await page.evaluate(() => { + const firstItem = document.querySelector( + '#inline-list .inline-item' + ) as HTMLElement + if (firstItem) { + // Override dragstart handler temporarily + const originalHandler = (firstItem as any).ondragstart + firstItem.ondragstart = (e) => { + console.log('ondragstart fired!') + console.log(' DataTransfer:', e.dataTransfer) + console.log(' Target:', e.target) + if (originalHandler) originalHandler(e) + } + } + }) + + const firstItem = page.locator('#inline-list .inline-item').first() + const secondItem = page.locator('#inline-list .inline-item').nth(1) + + // Use slower, more deliberate drag + const firstBox = await firstItem.boundingBox() + const secondBox = await secondItem.boundingBox() + + if (firstBox && secondBox) { + // Click and hold + await page.mouse.move( + firstBox.x + firstBox.width / 2, + firstBox.y + firstBox.height / 2 + ) + await page.mouse.down() + + // Wait longer + await page.waitForTimeout(500) + + // Move very slowly + for (let i = 0; i <= 10; i++) { + const x = + firstBox.x + + (secondBox.x - firstBox.x) * (i / 10) + + firstBox.width / 2 + const y = firstBox.y + firstBox.height / 2 + await page.mouse.move(x, y) + await page.waitForTimeout(50) + } + + // Release + await page.mouse.up() + await page.waitForTimeout(500) + } + + const finalStatus = await page.locator('#status').textContent() + console.log('Final status:', finalStatus) + }) +}) diff --git a/tests/e2e/multi-drag-test.spec.ts b/tests/e2e/multi-drag-test.spec.ts new file mode 100644 index 0000000..9ddb3f1 --- /dev/null +++ b/tests/e2e/multi-drag-test.spec.ts @@ -0,0 +1,80 @@ +import { test, expect } from '@playwright/test' + +test('multi-drag functionality test', async ({ page }) => { + // Navigate to the test page (using port 5174 since our dev server is running there) + await page.goto('http://localhost:5174/html-tests/test-multi-drag.html') + + // Wait for page to load + await page.waitForLoadState('networkidle') + + // Take initial screenshot + await page.screenshot({ path: '/tmp/initial.png' }) + console.log('Initial page loaded') + + // Click the first "Select All" button (the one for single list) + const selectAllButton = page + .locator('button') + .filter({ hasText: 'Select All' }) + .first() + await selectAllButton.click() + await page.waitForTimeout(1000) + await page.screenshot({ path: '/tmp/after_select_all.png' }) + console.log('Clicked Select All button') + + // Check for selected items (look for various selection indicators) + const selectedItems = await page + .locator( + '.selected, [aria-selected="true"], .multi-drag-selected, .sortable-chosen' + ) + .count() + console.log(`Found ${selectedItems} selected items`) + + // Find all draggable items + const draggableItems = await page + .locator('[draggable="true"], .sortable-item, li') + .count() + console.log(`Found ${draggableItems} draggable items`) + + // Get all list items for inspection + const listItems = await page.locator('li').all() + console.log(`Found ${listItems.length} list items`) + + if (listItems.length > 0) { + // Try to drag the first item + const firstItem = listItems[0] + + // Get the bounding box of the first item + const box = await firstItem.boundingBox() + if (box) { + const startX = box.x + box.width / 2 + const startY = box.y + box.height / 2 + + // Calculate target position (move down by 100px) + const targetX = startX + const targetY = startY + 100 + + console.log( + `Starting drag from (${startX}, ${startY}) to (${targetX}, ${targetY})` + ) + + // Perform drag operation + await page.mouse.move(startX, startY) + await page.mouse.down() + await page.waitForTimeout(500) + await page.screenshot({ path: '/tmp/during_drag.png' }) + + await page.mouse.move(targetX, targetY, { steps: 10 }) + await page.waitForTimeout(500) + await page.screenshot({ path: '/tmp/drag_end.png' }) + + await page.mouse.up() + await page.waitForTimeout(1000) + await page.screenshot({ path: '/tmp/after_drop.png' }) + + console.log('Drag operation completed') + } + } + + // Keep page open for a bit to observe + await page.waitForTimeout(2000) +}) diff --git a/tests/e2e/test-cross-container.spec.ts b/tests/e2e/test-cross-container.spec.ts new file mode 100644 index 0000000..bad16fc --- /dev/null +++ b/tests/e2e/test-cross-container.spec.ts @@ -0,0 +1,171 @@ +import { test } from '@playwright/test' +import { + injectEventLogger, + getItemOrder, + getDraggableState, +} from '../helpers/drag-helpers' + +test.describe('Cross-container Drag Test', () => { + test('test multiple horizontal lists drag', async ({ page }) => { + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + // Inject event loggers for both containers + await injectEventLogger(page, '#multi-1') + await injectEventLogger(page, '#multi-2') + + // Capture console logs + const logs: string[] = [] + page.on('console', (msg) => { + const text = msg.text() + logs.push(text) + console.log(text) + }) + + // Get initial state + const list1Initial = await getItemOrder( + page, + '#multi-1', + '.horizontal-item' + ) + const list2Initial = await getItemOrder( + page, + '#multi-2', + '.horizontal-item' + ) + + console.log('\n=== Initial State ===') + console.log('List 1:', list1Initial) + console.log('List 2:', list2Initial) + + // Check draggable state of items + const firstItemState = await getDraggableState( + page, + '#multi-1 .horizontal-item:first-child' + ) + console.log('\nFirst item draggable state:', firstItemState) + + // Test 1: Try Playwright's dragTo + console.log('\n=== Test 1: Playwright dragTo ===') + const sourceItem = page.locator('#multi-1 .horizontal-item').first() + const targetContainer = page.locator('#multi-2') + + try { + await sourceItem.dragTo(targetContainer) + await page.waitForTimeout(500) + } catch (e) { + console.log('dragTo error:', e) + } + + let list1After = await getItemOrder(page, '#multi-1', '.horizontal-item') + let list2After = await getItemOrder(page, '#multi-2', '.horizontal-item') + + console.log('After dragTo:') + console.log(' List 1:', list1After) + console.log(' List 2:', list2After) + + const status1 = await page.locator('#status').textContent() + console.log(' Status:', status1) + + // Test 2: Manual mouse drag to specific item + console.log('\n=== Test 2: Manual drag to specific item ===') + const sourceItem2 = page.locator('#multi-1 .horizontal-item').first() + const targetItem = page.locator('#multi-2 .horizontal-item').last() + + const sourceBox = await sourceItem2.boundingBox() + const targetBox = await targetItem.boundingBox() + + if (sourceBox && targetBox) { + // Start drag + await page.mouse.move( + sourceBox.x + sourceBox.width / 2, + sourceBox.y + sourceBox.height / 2 + ) + await page.mouse.down() + await page.waitForTimeout(100) + + // Move to target + await page.mouse.move( + targetBox.x + targetBox.width / 2, + targetBox.y + targetBox.height / 2, + { steps: 5 } + ) + await page.waitForTimeout(100) + + // Release + await page.mouse.up() + await page.waitForTimeout(500) + } + + list1After = await getItemOrder(page, '#multi-1', '.horizontal-item') + list2After = await getItemOrder(page, '#multi-2', '.horizontal-item') + + console.log('After manual drag:') + console.log(' List 1:', list1After) + console.log(' List 2:', list2After) + + const status2 = await page.locator('#status').textContent() + console.log(' Status:', status2) + + // Check if items actually moved between containers + const itemsMoved = + list1After.length !== list1Initial.length || + list2After.length !== list2Initial.length + console.log('\n=== Result ===') + console.log('Items moved between containers:', itemsMoved) + + // Check event logs + console.log('\n=== Event Logs ===') + const relevantLogs = logs.filter( + (log) => + log.includes('dragstart') || + log.includes('drop') || + log.includes('dragend') || + log.includes('Moved from List') + ) + relevantLogs.slice(-10).forEach((log) => console.log(' ', log)) + }) + + test('check group configuration', async ({ page }) => { + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + // Check if the containers have the same group + const groupInfo = await page.evaluate(() => { + const multi1 = document.getElementById('multi-1') + const multi2 = document.getElementById('multi-2') + + // Check data attributes + const info = { + multi1: { + id: multi1?.id, + dropZone: multi1?.dataset.dropZone, + sortableGroup: multi1?.dataset.sortableGroup, + classList: multi1?.className, + }, + multi2: { + id: multi2?.id, + dropZone: multi2?.dataset.dropZone, + sortableGroup: multi2?.dataset.sortableGroup, + classList: multi2?.className, + }, + } + + // Try to access Sortable instances if available + try { + const sortableInstances = (window as any).sortableInstances || [] + info['instanceCount'] = sortableInstances.length + } catch (e) { + info['instanceCount'] = 'unknown' + } + + return info + }) + + console.log('Group configuration:', JSON.stringify(groupInfo, null, 2)) + }) +}) diff --git a/tests/e2e/test-cross-debug.spec.ts b/tests/e2e/test-cross-debug.spec.ts new file mode 100644 index 0000000..5bdced9 --- /dev/null +++ b/tests/e2e/test-cross-debug.spec.ts @@ -0,0 +1,138 @@ +import { test } from '@playwright/test' + +test.describe('Debug Cross-Container', () => { + test('debug why drag ends immediately', async ({ page }) => { + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + // Monitor console FIRST + const logs: string[] = [] + page.on('console', (msg) => { + const text = msg.text() + logs.push(text) + console.log(text) + }) + + // Add comprehensive event monitoring + await page.evaluate(() => { + const multi1 = document.getElementById('multi-1') + const multi2 = document.getElementById('multi-2') + + // Track ALL events + const events = [ + 'dragstart', + 'dragenter', + 'dragover', + 'dragleave', + 'drop', + 'dragend', + ] + + events.forEach((eventName) => { + // Monitor on containers + multi1?.addEventListener( + eventName, + (e) => { + console.log(`[Container1] ${eventName}`) + if (eventName === 'dragstart' || eventName === 'dragend') { + const target = e.target as HTMLElement + console.log(` Target: ${target.textContent}`) + console.log( + ` Display: ${window.getComputedStyle(target).display}` + ) + } + }, + true + ) + + multi2?.addEventListener( + eventName, + (e) => { + console.log(`[Container2] ${eventName}`) + }, + true + ) + + // Monitor on document + document.addEventListener( + eventName, + (e) => { + const target = e.target as HTMLElement + if (target.classList?.contains('horizontal-item')) { + console.log(`[Document] ${eventName} on ${target.textContent}`) + } + }, + true + ) + }) + + // Check if global handler was added + console.log('Global handler check: Will be monitored via events...') + }) + + // Try manual drag with precise control + console.log('\n=== Starting manual drag test ===') + + const firstItem = page.locator('#multi-1 .horizontal-item').first() + const targetContainer = page.locator('#multi-2') + + const sourceBox = await firstItem.boundingBox() + const targetBox = await targetContainer.boundingBox() + + if (sourceBox && targetBox) { + // Move to source + await page.mouse.move( + sourceBox.x + sourceBox.width / 2, + sourceBox.y + sourceBox.height / 2 + ) + + // Start drag + await page.mouse.down() + await page.waitForTimeout(200) + + // Move just a little bit first (to trigger dragover on the source container) + await page.mouse.move( + sourceBox.x + sourceBox.width / 2 + 20, + sourceBox.y + sourceBox.height / 2 + ) + await page.waitForTimeout(100) + + // Now move to target container + await page.mouse.move( + targetBox.x + targetBox.width / 2, + targetBox.y + targetBox.height / 2, + { steps: 10 } + ) + await page.waitForTimeout(200) + + // Release + await page.mouse.up() + await page.waitForTimeout(500) + } + + // Check final state + const finalState = await page.evaluate(() => { + const multi1 = document.getElementById('multi-1') + const multi2 = document.getElementById('multi-2') + return { + list1Count: multi1?.querySelectorAll('.horizontal-item').length, + list2Count: multi2?.querySelectorAll('.horizontal-item').length, + status: document.getElementById('status')?.textContent, + } + }) + + console.log('\n=== Final State ===') + console.log('List 1 items:', finalState.list1Count) + console.log('List 2 items:', finalState.list2Count) + console.log('Status:', finalState.status) + + // Analyze logs + const dragEvents = logs.filter( + (log) => log.includes('[Container') || log.includes('[Document]') + ) + console.log('\n=== Event sequence ===') + dragEvents.forEach((event) => console.log(event)) + }) +}) diff --git a/tests/e2e/test-drag-immediate.spec.ts b/tests/e2e/test-drag-immediate.spec.ts new file mode 100644 index 0000000..10d44b9 --- /dev/null +++ b/tests/e2e/test-drag-immediate.spec.ts @@ -0,0 +1,128 @@ +import { test } from '@playwright/test' + +test('debug immediate dragend', async ({ page }) => { + await page.goto('http://localhost:5173/html-tests/test-horizontal-list.html') + await page.waitForLoadState('networkidle') + + // Add detailed logging to understand why drag ends immediately + await page.evaluate(() => { + document.addEventListener( + 'dragstart', + (e) => { + const target = e.target as HTMLElement + console.log('[DRAGSTART]', { + text: target.textContent, + display: window.getComputedStyle(target).display, + parent: target.parentElement?.id, + dataTransfer: e.dataTransfer ? 'present' : 'missing', + }) + + // Check what DragManager thinks + const container = target.parentElement + if (container) { + console.log('[DRAGSTART] Container:', { + id: container.id, + sortableGroup: container.dataset.sortableGroup, + dropZone: container.dataset.dropZone, + }) + } + + // Check GlobalDragState after a moment + setTimeout(() => { + try { + // @ts-ignore + const gs = window.__globalDragState + if (gs) { + console.log( + '[DRAGSTART+100ms] Active drags:', + gs.getActiveDragCount() + ) + const activeDrag = gs.getActiveDrag('html5-drag') + if (activeDrag) { + console.log('[DRAGSTART+100ms] Active drag details:', { + groupName: activeDrag.groupName, + fromZone: activeDrag.fromZone?.id, + }) + } else { + console.log('[DRAGSTART+100ms] No active drag found!') + } + } + } catch (err) { + console.log('[DRAGSTART+100ms] Error:', err) + } + }, 100) + }, + true + ) + + document.addEventListener( + 'dragover', + (e) => { + const target = e.target as HTMLElement + const container = target.closest('#multi-1, #multi-2') + if (container) { + console.log('[DRAGOVER] on container:', container.id) + } + }, + true + ) + + document.addEventListener( + 'dragend', + (e) => { + const target = e.target as HTMLElement + console.log('[DRAGEND]', { + text: target.textContent, + parent: target.parentElement?.id, + }) + + // Check GlobalDragState + try { + // @ts-ignore + const gs = window.__globalDragState + if (gs) { + console.log( + '[DRAGEND] Active drags remaining:', + gs.getActiveDragCount() + ) + } + } catch (err) { + console.log('[DRAGEND] Error:', err) + } + }, + true + ) + }) + + // Monitor console + page.on('console', (msg) => console.log(msg.text())) + + // Try Playwright's dragTo + console.log('\n=== Starting drag test with Playwright dragTo ===') + + const firstItem = page.locator('#multi-1 .horizontal-item').first() + const secondContainer = page.locator('#multi-2') + + try { + await firstItem.dragTo(secondContainer, { timeout: 5000 }) + console.log('Drag completed') + } catch (e) { + console.log('Drag failed:', e) + } + + await page.waitForTimeout(1000) + + // Check final state + const finalState = await page.evaluate(() => { + const multi1 = document.getElementById('multi-1') + const multi2 = document.getElementById('multi-2') + return { + list1Count: multi1?.querySelectorAll('.horizontal-item').length, + list2Count: multi2?.querySelectorAll('.horizontal-item').length, + } + }) + + console.log('\n=== Final State ===') + console.log('List 1 items:', finalState.list1Count) + console.log('List 2 items:', finalState.list2Count) +}) diff --git a/tests/e2e/test-group-debug.spec.ts b/tests/e2e/test-group-debug.spec.ts new file mode 100644 index 0000000..04b10cf --- /dev/null +++ b/tests/e2e/test-group-debug.spec.ts @@ -0,0 +1,123 @@ +import { test } from '@playwright/test' + +test('debug group compatibility', async ({ page }) => { + await page.goto('http://localhost:5173/html-tests/test-horizontal-list.html') + await page.waitForLoadState('networkidle') + + // Check what's actually set on the containers and in the GlobalDragState + const groupInfo = await page.evaluate(() => { + const multi1 = document.getElementById('multi-1') + const multi2 = document.getElementById('multi-2') + + // Get data attributes + const info = { + multi1: { + id: multi1?.id, + dropZone: multi1?.dataset.dropZone, + sortableGroup: multi1?.dataset.sortableGroup, + }, + multi2: { + id: multi2?.id, + dropZone: multi2?.dataset.dropZone, + sortableGroup: multi2?.dataset.sortableGroup, + }, + } + + return info + }) + + console.log('Group configuration:', JSON.stringify(groupInfo, null, 2)) + + // Now try to start a drag and check what GlobalDragState says + await page.evaluate(() => { + // Add a global handler to check canAcceptDrop during drag + document.addEventListener( + 'dragover', + (e) => { + const target = e.target as HTMLElement + const container = target.closest('#multi-1, #multi-2') + if (container) { + // Try to access GlobalDragState if it's available + try { + // @ts-ignore + const globalDragState = window.__globalDragState + if (globalDragState) { + const canAccept = globalDragState.canAcceptDrop( + 'html5-drag', + container.dataset.sortableGroup + ) + console.log( + `[DRAGOVER] Container ${container.id} can accept: ${canAccept}` + ) + } + } catch (err) { + console.log('[DRAGOVER] Could not check GlobalDragState') + } + } + }, + true + ) + + // Add handler to track dragstart + document.addEventListener( + 'dragstart', + (e) => { + const target = e.target as HTMLElement + console.log('[DRAGSTART] Started dragging:', target.textContent) + console.log('[DRAGSTART] From container:', target.parentElement?.id) + + // Check GlobalDragState after drag starts + setTimeout(() => { + try { + // @ts-ignore + const globalDragState = window.__globalDragState + if (globalDragState) { + const activeDrag = globalDragState.getActiveDrag('html5-drag') + if (activeDrag) { + console.log( + '[DRAGSTART] Active drag group:', + activeDrag.groupName + ) + console.log( + '[DRAGSTART] Can accept drop to shared-horizontal:', + globalDragState.canAcceptDrop( + 'html5-drag', + 'shared-horizontal' + ) + ) + } + } + } catch (err) { + console.log('[DRAGSTART] Could not access GlobalDragState') + } + }, 100) + }, + true + ) + + document.addEventListener( + 'dragend', + (e) => { + const target = e.target as HTMLElement + console.log('[DRAGEND] Ended dragging:', target.textContent) + }, + true + ) + }) + + // Monitor console + page.on('console', (msg) => console.log(msg.text())) + + // Try to drag + console.log('\nAttempting drag...') + const source = page.locator('#multi-1 .horizontal-item').first() + const target = page.locator('#multi-2') + + try { + await source.dragTo(target, { timeout: 5000 }) + } catch (e) { + console.log('Drag timed out or failed') + } + + await page.waitForTimeout(1000) +}) diff --git a/tests/e2e/test-inline-block-debug.spec.ts b/tests/e2e/test-inline-block-debug.spec.ts new file mode 100644 index 0000000..0bcea8f --- /dev/null +++ b/tests/e2e/test-inline-block-debug.spec.ts @@ -0,0 +1,261 @@ +import { test, expect } from '@playwright/test' + +test.describe('Inline-block Drag and Drop Debug', () => { + test('Test inline-block elements on test-inline-block-bug.html', async ({ + page, + }) => { + // Navigate to the first test page + await page.goto('/html-tests/test-inline-block-bug.html') + + // Wait for initialization + await page.waitForTimeout(1000) + + // Take initial screenshot + await page.screenshot({ + path: 'test-results/inline-block-bug-initial.png', + fullPage: true, + }) + + // Get the inline-block items + const inlineItems = page.locator('#inline-container .inline-item') + await expect(inlineItems).toHaveCount(4) + + // Check if draggable attributes are set + for (let i = 0; i < 4; i++) { + const item = inlineItems.nth(i) + const draggableAttr = await item.getAttribute('draggable') + console.log(`Inline item ${i}: draggable=${draggableAttr}`) + } + + // Get computed styles for the first inline item + const firstItem = inlineItems.first() + const computedStyle = await firstItem.evaluate((el) => { + const style = window.getComputedStyle(el) + return { + display: style.display, + position: style.position, + transform: style.transform, + cursor: style.cursor, + userSelect: style.userSelect, + pointerEvents: style.pointerEvents, + } + }) + console.log('First inline item computed styles:', computedStyle) + + // Test drag and drop + console.log('Testing drag from first to third item...') + + // Get initial text content + const initialOrder = await inlineItems.allTextContents() + console.log('Initial order:', initialOrder) + + // Attempt to drag first item to third position + const firstItemBox = await firstItem.boundingBox() + const thirdItem = inlineItems.nth(2) + const thirdItemBox = await thirdItem.boundingBox() + + if (firstItemBox && thirdItemBox) { + // Start drag + await page.mouse.move( + firstItemBox.x + firstItemBox.width / 2, + firstItemBox.y + firstItemBox.height / 2 + ) + await page.mouse.down() + + // Take screenshot during drag start + await page.screenshot({ + path: 'test-results/inline-block-bug-drag-start.png', + }) + + // Move to target + await page.mouse.move( + thirdItemBox.x + thirdItemBox.width / 2, + thirdItemBox.y + thirdItemBox.height / 2, + { steps: 5 } + ) + + // Take screenshot during drag + await page.screenshot({ + path: 'test-results/inline-block-bug-during-drag.png', + }) + + // Drop + await page.mouse.up() + + // Wait for animation + await page.waitForTimeout(500) + + // Take final screenshot + await page.screenshot({ + path: 'test-results/inline-block-bug-after-drag.png', + }) + + // Check final order + const finalOrder = await inlineItems.allTextContents() + console.log('Final order:', finalOrder) + + // Check if order changed + const orderChanged = + JSON.stringify(initialOrder) !== JSON.stringify(finalOrder) + console.log('Order changed:', orderChanged) + } + + // Check console logs for any errors + const logs: string[] = [] + page.on('console', (msg) => logs.push(msg.text())) + + // Wait a bit more to see if there are any delayed logs + await page.waitForTimeout(1000) + + console.log('Console logs:', logs) + }) + + test('Test inline-block elements on test-horizontal-list.html', async ({ + page, + }) => { + // Navigate to the second test page + await page.goto('/html-tests/test-horizontal-list.html') + + // Wait for initialization + await page.waitForTimeout(1000) + + // Take initial screenshot + await page.screenshot({ + path: 'test-results/horizontal-list-initial.png', + fullPage: true, + }) + + // Focus on the inline-block section + const inlineSection = page.locator('#inline-list') + const inlineItems = page.locator('#inline-list .inline-item') + await expect(inlineItems).toHaveCount(5) + + // Check if draggable attributes are set + for (let i = 0; i < 5; i++) { + const item = inlineItems.nth(i) + const draggableAttr = await item.getAttribute('draggable') + console.log(`Horizontal inline item ${i}: draggable=${draggableAttr}`) + } + + // Get computed styles for the first inline item + const firstItem = inlineItems.first() + const computedStyle = await firstItem.evaluate((el) => { + const style = window.getComputedStyle(el) + return { + display: style.display, + position: style.position, + transform: style.transform, + cursor: style.cursor, + userSelect: style.userSelect, + pointerEvents: style.pointerEvents, + verticalAlign: style.verticalAlign, + marginRight: style.marginRight, + } + }) + console.log('First horizontal inline item computed styles:', computedStyle) + + // Get container styles + const containerStyle = await inlineSection.evaluate((el) => { + const style = window.getComputedStyle(el) + return { + display: style.display, + whiteSpace: style.whiteSpace, + overflowX: style.overflowX, + minHeight: style.minHeight, + } + }) + console.log('Inline container styles:', containerStyle) + + // Test drag and drop + console.log('Testing drag from first to third item in horizontal list...') + + // Get initial text content + const initialOrder = await inlineItems.allTextContents() + console.log('Initial order:', initialOrder) + + // Attempt to drag first item to third position + const firstItemBox = await firstItem.boundingBox() + const thirdItem = inlineItems.nth(2) + const thirdItemBox = await thirdItem.boundingBox() + + if (firstItemBox && thirdItemBox) { + // Start drag + await page.mouse.move( + firstItemBox.x + firstItemBox.width / 2, + firstItemBox.y + firstItemBox.height / 2 + ) + await page.mouse.down() + + // Take screenshot during drag start + await page.screenshot({ + path: 'test-results/horizontal-list-drag-start.png', + }) + + // Move to target + await page.mouse.move( + thirdItemBox.x + thirdItemBox.width / 2, + thirdItemBox.y + thirdItemBox.height / 2, + { steps: 5 } + ) + + // Take screenshot during drag + await page.screenshot({ + path: 'test-results/horizontal-list-during-drag.png', + }) + + // Drop + await page.mouse.up() + + // Wait for animation + await page.waitForTimeout(500) + + // Take final screenshot + await page.screenshot({ + path: 'test-results/horizontal-list-after-drag.png', + }) + + // Check final order + const finalOrder = await inlineItems.allTextContents() + console.log('Final order:', finalOrder) + + // Check if order changed + const orderChanged = + JSON.stringify(initialOrder) !== JSON.stringify(finalOrder) + console.log('Order changed:', orderChanged) + } + + // Test the flexbox list as a comparison + console.log('Testing flexbox list for comparison...') + const flexItems = page.locator('#flex-list .horizontal-item') + const flexInitialOrder = await flexItems.allTextContents() + console.log('Flex initial order:', flexInitialOrder) + + const firstFlexItem = flexItems.first() + const thirdFlexItem = flexItems.nth(2) + + const firstFlexBox = await firstFlexItem.boundingBox() + const thirdFlexBox = await thirdFlexItem.boundingBox() + + if (firstFlexBox && thirdFlexBox) { + await page.mouse.move( + firstFlexBox.x + firstFlexBox.width / 2, + firstFlexBox.y + firstFlexBox.height / 2 + ) + await page.mouse.down() + await page.mouse.move( + thirdFlexBox.x + thirdFlexBox.width / 2, + thirdFlexBox.y + thirdFlexBox.height / 2, + { steps: 5 } + ) + await page.mouse.up() + await page.waitForTimeout(500) + + const flexFinalOrder = await flexItems.allTextContents() + console.log('Flex final order:', flexFinalOrder) + + const flexOrderChanged = + JSON.stringify(flexInitialOrder) !== JSON.stringify(flexFinalOrder) + console.log('Flex order changed:', flexOrderChanged) + } + }) +}) diff --git a/tests/e2e/test-inline-specific.spec.ts b/tests/e2e/test-inline-specific.spec.ts new file mode 100644 index 0000000..e6d31d4 --- /dev/null +++ b/tests/e2e/test-inline-specific.spec.ts @@ -0,0 +1,164 @@ +import { test } from '@playwright/test' + +test.describe('Test Inline-block Specific', () => { + test('test Section 3 inline-block drag', async ({ page }) => { + await page.goto( + 'http://localhost:5173/html-tests/test-horizontal-list.html' + ) + await page.waitForLoadState('networkidle') + + // Monitor all events + await page.evaluate(() => { + const inlineList = document.querySelector('#inline-list') + if (!inlineList) { + console.log('ERROR: No inline-list found!') + return + } + + // Add event listeners to the container + const events = [ + 'dragstart', + 'dragover', + 'dragend', + 'drop', + 'dragleave', + 'dragenter', + ] + events.forEach((eventName) => { + inlineList.addEventListener( + eventName, + (e) => { + const target = e.target as HTMLElement + if (target.classList.contains('inline-item')) { + console.log(`[Container] ${eventName} on ${target.textContent}`) + if (eventName === 'dragstart') { + console.log( + ` - Inline-block check in DragManager should skip DOM changes` + ) + console.log( + ` - Display: ${window.getComputedStyle(target).display}` + ) + } + } + }, + true + ) // Use capture phase + }) + + // Check initial state + const items = inlineList.querySelectorAll('.inline-item') + console.log(`Found ${items.length} inline items`) + items.forEach((item, i) => { + const el = item as HTMLElement + console.log( + `Item ${i}: draggable=${el.draggable}, display=${window.getComputedStyle(el).display}` + ) + }) + }) + + // Capture console logs + const logs: string[] = [] + page.on('console', (msg) => { + const text = msg.text() + logs.push(text) + console.log(text) + }) + + // Wait for initialization + await page.waitForTimeout(500) + + // Try to drag the first item + const firstItem = page.locator('#inline-list .inline-item').first() + const thirdItem = page.locator('#inline-list .inline-item').nth(2) + + console.log('\n=== Attempting drag from first to third ===') + + // Method 1: Using Playwright's dragTo + console.log('Method 1: Playwright dragTo...') + try { + await firstItem.dragTo(thirdItem, { + targetPosition: { x: 10, y: 10 }, + }) + await page.waitForTimeout(500) + } catch (e) { + console.log(`dragTo failed: ${e}`) + } + + let status = await page.locator('#status').textContent() + console.log(`Status after dragTo: ${status}`) + + // Method 2: Manual mouse events + console.log('\nMethod 2: Manual mouse events...') + const firstBox = await firstItem.boundingBox() + const thirdBox = await thirdItem.boundingBox() + + if (firstBox && thirdBox) { + await page.mouse.move( + firstBox.x + firstBox.width / 2, + firstBox.y + firstBox.height / 2 + ) + await page.mouse.down() + await page.waitForTimeout(200) + + // Move slowly + for (let i = 1; i <= 5; i++) { + const x = + firstBox.x + (thirdBox.x - firstBox.x) * (i / 5) + firstBox.width / 2 + const y = firstBox.y + firstBox.height / 2 + await page.mouse.move(x, y) + await page.waitForTimeout(100) + } + + await page.mouse.up() + await page.waitForTimeout(500) + } + + status = await page.locator('#status').textContent() + console.log(`Status after manual drag: ${status}`) + + // Check if any DOM modifications happened + const finalState = await page.evaluate(() => { + const firstItem = document.querySelector( + '#inline-list .inline-item' + ) as HTMLElement + return { + classes: firstItem?.className, + opacity: firstItem?.style.opacity, + display: firstItem ? window.getComputedStyle(firstItem).display : null, + } + }) + + console.log('\nFinal item state:', finalState) + + // Get the order of items + const finalOrder = await page + .locator('#inline-list .inline-item') + .allTextContents() + console.log('Final order:', finalOrder) + }) + + test('compare with working test-inline-block-bug.html', async ({ page }) => { + // Test the working version + await page.goto( + 'http://localhost:5173/html-tests/test-inline-block-bug.html' + ) + await page.waitForLoadState('networkidle') + + const logs: string[] = [] + page.on('console', (msg) => logs.push(msg.text())) + + const firstItem = page.locator('#inline-container .inline-item').first() + const thirdItem = page.locator('#inline-container .inline-item').nth(2) + + await firstItem.dragTo(thirdItem) + await page.waitForTimeout(500) + + const workingOrder = await page + .locator('#inline-container .inline-item') + .allTextContents() + console.log('WORKING version order after drag:', workingOrder) + + const workingLogs = logs.filter((log) => log.includes('INLINE')) + console.log('WORKING version logs:', workingLogs) + }) +}) diff --git a/tests/e2e/test-multi-drag-debug.spec.ts b/tests/e2e/test-multi-drag-debug.spec.ts new file mode 100644 index 0000000..0ed1c58 --- /dev/null +++ b/tests/e2e/test-multi-drag-debug.spec.ts @@ -0,0 +1,516 @@ +import { expect, test } from '@playwright/test' + +test.describe('Multi-Drag Debug Tests', () => { + test.beforeEach(async ({ page }) => { + // Set up console logging to capture any errors or debug messages + page.on('console', (msg) => { + const type = msg.type() + const text = msg.text() + console.log(`[Browser ${type}]:`, text) + }) + + // Set up error logging + page.on('pageerror', (error) => { + console.error('[Browser Error]:', error.message) + }) + + // Navigate to the multi-drag test page + await page.goto('http://localhost:5173/html-tests/test-multi-drag.html') + + // Wait for the page to load completely + await page.waitForLoadState('networkidle') + + // Wait for the status element to ensure the page is ready + await expect(page.locator('#status')).toBeVisible() + await expect(page.locator('#status')).toContainText('Ready') + }) + + test('should verify initial page state and elements', async ({ page }) => { + await test.step('Check page title and main elements', async () => { + await expect(page).toHaveTitle('Multi-Drag Test') + await expect(page.locator('h1')).toContainText( + 'Multi-Drag Selection Test' + ) + + // Verify single list exists with correct items + const singleListItems = page.locator('#single-list .sortable-item') + await expect(singleListItems).toHaveCount(8) + + // Verify multi-lists exist + const todoItems = page.locator('#multi-list-1 .sortable-item') + const doneItems = page.locator('#multi-list-2 .sortable-item') + await expect(todoItems).toHaveCount(5) + await expect(doneItems).toHaveCount(2) + }) + + await test.step('Check controls and buttons are present', async () => { + await expect(page.locator('#multiDragToggle')).toBeChecked() + await expect( + page.getByRole('button', { name: 'Select All', exact: true }) + ).toBeVisible() + await expect( + page.getByRole('button', { name: 'Clear Selection', exact: true }) + ).toBeVisible() + }) + }) + + test('should debug single item selection behavior', async ({ page }) => { + await test.step('Test basic item selection', async () => { + const firstItem = page.locator('#single-list [data-id="item-1"]') + const secondItem = page.locator('#single-list [data-id="item-2"]') + + // Click first item and verify selection + await firstItem.click() + + // Check if item gets selected class + await expect(firstItem).toHaveClass(/sortable-selected/) + + // Check status update + await expect(page.locator('#status')).toContainText('Selected 1 item') + + // Log the current state + const selectedItems = await page.locator('.sortable-selected').count() + console.log(`Selected items count: ${selectedItems}`) + + // Test multiple selection with Ctrl+Click + await secondItem.click({ modifiers: ['Control'] }) + + // Both items should be selected now + await expect(firstItem).toHaveClass(/sortable-selected/) + await expect(secondItem).toHaveClass(/sortable-selected/) + + const totalSelected = await page.locator('.sortable-selected').count() + console.log(`Total selected items after Ctrl+Click: ${totalSelected}`) + + await expect(page.locator('#status')).toContainText('Selected 2 items') + }) + + await test.step('Log JavaScript state after selection', async () => { + const jsState = await page.evaluate(() => { + const singleList = document.getElementById('single-list') + const selectedElements = document.querySelectorAll( + '#single-list .sortable-selected' + ) + + return { + selectedCount: selectedElements.length, + selectedIds: Array.from(selectedElements).map((el) => + el.getAttribute('data-id') + ), + sortableExists: !!window.debugSortable, + multiDragEnabled: window.debugSortable?.options?.multiDrag, + hasSelectedItems: !!window.debugSortable?._selectedItems, + selectedItemsSize: window.debugSortable?._selectedItems?.size || 0, + } + }) + + console.log('JavaScript state after selection:', jsState) + }) + }) + + test('should debug drag behavior with selected items', async ({ page }) => { + await test.step('Select multiple items', async () => { + const firstItem = page.locator('#single-list [data-id="item-1"]') + const thirdItem = page.locator('#single-list [data-id="item-3"]') + + // Select two items + await firstItem.click() + await thirdItem.click({ modifiers: ['Control'] }) + + // Verify both are selected + await expect(firstItem).toHaveClass(/sortable-selected/) + await expect(thirdItem).toHaveClass(/sortable-selected/) + + console.log('Selected items 1 and 3') + }) + + await test.step('Drag first selected item and monitor events', async () => { + const firstItem = page.locator('#single-list [data-id="item-1"]') + const targetPosition = page.locator('#single-list [data-id="item-5"]') + + // Set up event monitoring + await page.evaluate(() => { + window.eventLog = [] + + // Monitor all drag-related events + const events = ['dragstart', 'dragend', 'dragover', 'drop'] + events.forEach((eventName) => { + document.addEventListener(eventName, (e) => { + window.eventLog.push({ + type: eventName, + target: e.target?.getAttribute?.('data-id') || 'unknown', + timestamp: Date.now(), + }) + }) + }) + + // Monitor Sortable events if available + if (window.debugSortable) { + const originalOnStart = window.debugSortable.options.onStart + const originalOnEnd = window.debugSortable.options.onEnd + + window.debugSortable.options.onStart = function (evt) { + window.eventLog.push({ + type: 'sortable-start', + selectedCount: evt.items?.length || 0, + draggedItem: evt.item?.getAttribute?.('data-id') || 'unknown', + timestamp: Date.now(), + }) + if (originalOnStart) originalOnStart.call(this, evt) + } + + window.debugSortable.options.onEnd = function (evt) { + window.eventLog.push({ + type: 'sortable-end', + selectedCount: evt.items?.length || 0, + oldIndex: evt.oldIndex, + newIndex: evt.newIndex, + fromContainer: evt.from?.id, + toContainer: evt.to?.id, + timestamp: Date.now(), + }) + if (originalOnEnd) originalOnEnd.call(this, evt) + } + } + }) + + // Perform the drag operation + await firstItem.dragTo(targetPosition) + + // Wait for any animations or async operations + await page.waitForTimeout(500) + }) + + await test.step('Analyze drag results', async () => { + // Get the event log + const eventLog = await page.evaluate(() => window.eventLog || []) + console.log('Drag events:', eventLog) + + // Check final positions + const finalOrder = await page.evaluate(() => { + const items = document.querySelectorAll('#single-list .sortable-item') + return Array.from(items).map((item) => item.getAttribute('data-id')) + }) + + console.log('Final order after drag:', finalOrder) + + // Check which items are still selected + const stillSelected = await page.evaluate(() => { + const selected = document.querySelectorAll( + '#single-list .sortable-selected' + ) + return Array.from(selected).map((item) => item.getAttribute('data-id')) + }) + + console.log('Items still selected after drag:', stillSelected) + + // Check if both selected items moved together + const item1Index = finalOrder.indexOf('item-1') + const item3Index = finalOrder.indexOf('item-3') + + console.log(`Item 1 is now at index: ${item1Index}`) + console.log(`Item 3 is now at index: ${item3Index}`) + + // Log whether they moved together or separately + if (Math.abs(item1Index - item3Index) === 2) { + console.log( + '✓ Selected items moved together (with original item-2 between them)' + ) + } else if (item1Index !== 0 && item3Index !== 2) { + console.log('✓ Both selected items moved to new positions') + } else { + console.log('✗ Only one item moved, multi-drag not working correctly') + } + }) + }) + + test('should test cross-container multi-drag', async ({ page }) => { + await test.step('Select items from both lists', async () => { + const todoItem1 = page.locator('#multi-list-1 [data-id="todo-1"]') + const todoItem2 = page.locator('#multi-list-1 [data-id="todo-2"]') + const doneItem1 = page.locator('#multi-list-2 [data-id="done-1"]') + + // Select items from both lists + await todoItem1.click() + await todoItem2.click({ modifiers: ['Control'] }) + + // Verify selection + await expect(todoItem1).toHaveClass(/sortable-selected/) + await expect(todoItem2).toHaveClass(/sortable-selected/) + + console.log('Selected multiple items from todo list') + }) + + await test.step('Drag selected items to other list', async () => { + const todoItem1 = page.locator('#multi-list-1 [data-id="todo-1"]') + const doneList = page.locator('#multi-list-2') + + // Set up event monitoring for cross-container drag + await page.evaluate(() => { + window.crossContainerLog = [] + + // Monitor both sortable instances + const multiList1 = document.getElementById('multi-list-1') + const multiList2 = document.getElementById('multi-list-2') + + if (multiList1 && multiList2) { + ;[multiList1, multiList2].forEach((list, index) => { + list.addEventListener('dragenter', () => { + window.crossContainerLog.push(`dragenter-list-${index + 1}`) + }) + list.addEventListener('dragover', () => { + window.crossContainerLog.push(`dragover-list-${index + 1}`) + }) + list.addEventListener('drop', () => { + window.crossContainerLog.push(`drop-list-${index + 1}`) + }) + }) + } + }) + + // Drag from todo to done list + await todoItem1.dragTo(doneList) + await page.waitForTimeout(500) + + // Check results + const crossContainerLog = await page.evaluate( + () => window.crossContainerLog || [] + ) + console.log('Cross-container drag events:', crossContainerLog) + + // Check final distribution + const todoCount = await page + .locator('#multi-list-1 .sortable-item') + .count() + const doneCount = await page + .locator('#multi-list-2 .sortable-item') + .count() + + console.log( + `After cross-container drag - Todo: ${todoCount}, Done: ${doneCount}` + ) + + // Check if both selected items moved + const todo1InDone = await page + .locator('#multi-list-2 [data-id="todo-1"]') + .count() + const todo2InDone = await page + .locator('#multi-list-2 [data-id="todo-2"]') + .count() + + console.log(`todo-1 in done list: ${todo1InDone > 0}`) + console.log(`todo-2 in done list: ${todo2InDone > 0}`) + + if (todo1InDone > 0 && todo2InDone > 0) { + console.log('✓ Multi-drag across containers working correctly') + } else if (todo1InDone > 0) { + console.log('✗ Only dragged item moved, not all selected items') + } else { + console.log('✗ No items moved to target container') + } + }) + }) + + test('should check console for JavaScript errors and warnings', async ({ + page, + }) => { + const consoleMessages: string[] = [] + const errors: string[] = [] + + page.on('console', (msg) => { + const text = msg.text() + consoleMessages.push(`${msg.type()}: ${text}`) + if (msg.type() === 'error') { + errors.push(text) + } + }) + + page.on('pageerror', (error) => { + errors.push(`Page Error: ${error.message}`) + }) + + await test.step('Trigger various multi-drag operations to check for errors', async () => { + // Test various scenarios that might trigger errors + + // 1. Select and deselect items + const firstItem = page.locator('#single-list [data-id="item-1"]') + await firstItem.click() + await firstItem.click() // deselect + + // 2. Use control buttons + await page.click('button:has-text("Select All")') + await page.waitForTimeout(100) + await page.click('button:has-text("Clear Selection")') + await page.waitForTimeout(100) + + // 3. Test keyboard shortcuts + await page.keyboard.press('Escape') + + // 4. Toggle multi-drag + await page.click('#multiDragToggle') + await page.waitForTimeout(100) + await page.click('#multiDragToggle') // turn back on + + // 5. Test range selection + await firstItem.click() + const thirdItem = page.locator('#single-list [data-id="item-3"]') + await thirdItem.click({ modifiers: ['Shift'] }) + + // 6. Drag operation + await firstItem.dragTo(page.locator('#single-list [data-id="item-6"]')) + await page.waitForTimeout(300) + }) + + await test.step('Report console messages and errors', async () => { + console.log('\n=== Console Messages ===') + consoleMessages.forEach((msg) => console.log(msg)) + + console.log('\n=== Errors Found ===') + if (errors.length === 0) { + console.log('✓ No JavaScript errors detected') + } else { + errors.forEach((error) => console.log(`✗ ${error}`)) + } + + // Fail test if critical errors found + const criticalErrors = errors.filter( + (error) => + !error.includes('favicon') && // Ignore favicon errors + !error.includes('sourcemap') && // Ignore sourcemap warnings + !error.toLowerCase().includes('warning') // Filter out warnings + ) + + if (criticalErrors.length > 0) { + throw new Error( + `Critical JavaScript errors detected: ${criticalErrors.join(', ')}` + ) + } + }) + }) + + test('should verify multi-drag configuration and plugin state', async ({ + page, + }) => { + await test.step('Check Sortable configuration and plugin installation', async () => { + const sortableState = await page.evaluate(() => { + const singleListElement = document.getElementById('single-list') + const multiList1Element = document.getElementById('multi-list-1') + + // Try to find the Sortable instances + let singleListConfig = null + const multiList1Config = null + + // Check if instances are stored globally + if (window.debugSortable) { + singleListConfig = { + multiDrag: window.debugSortable.options?.multiDrag, + selectedClass: window.debugSortable.options?.selectedClass, + hasSelectFunction: + typeof window.debugSortable.select === 'function', + hasDeselectFunction: + typeof window.debugSortable.deselect === 'function', + } + } + + return { + singleListExists: !!singleListElement, + multiList1Exists: !!multiList1Element, + globalSortableAvailable: !!window.Sortable, + debugSortableAvailable: !!window.debugSortable, + multiDragPluginAvailable: !!window.MultiDragPlugin, + singleListConfig, + } + }) + + console.log('Sortable configuration state:', sortableState) + + // Verify key components are available + expect(sortableState.singleListExists).toBe(true) + expect(sortableState.multiList1Exists).toBe(true) + + if (!sortableState.globalSortableAvailable) { + console.log( + '⚠️ Global Sortable not available - may affect multi-drag functionality' + ) + } + + if (!sortableState.multiDragPluginAvailable) { + console.log( + '⚠️ MultiDragPlugin not available - this may be the root cause of issues' + ) + } + + if (sortableState.singleListConfig) { + console.log( + 'Single list multi-drag enabled:', + sortableState.singleListConfig.multiDrag + ) + console.log( + 'Selected class configured:', + sortableState.singleListConfig.selectedClass + ) + } + }) + }) + + test('should test manual multi-selection patterns', async ({ page }) => { + await test.step('Test different selection patterns', async () => { + // Clear any existing selections + await page.keyboard.press('Escape') + + // Pattern 1: Sequential selection with Ctrl + console.log('Testing sequential Ctrl+Click selection...') + for (let i = 1; i <= 3; i++) { + const item = page.locator(`#single-list [data-id="item-${i}"]`) + if (i === 1) { + await item.click() // First item normal click + } else { + await item.click({ modifiers: ['Control'] }) // Subsequent with Ctrl + } + + const selectedCount = await page + .locator('#single-list .sortable-selected') + .count() + console.log( + `After selecting item ${i}: ${selectedCount} items selected` + ) + } + + // Check final state + const finalSelected = await page.evaluate(() => { + return Array.from( + document.querySelectorAll('#single-list .sortable-selected') + ).map((el) => el.getAttribute('data-id')) + }) + console.log('Final selected items:', finalSelected) + + // Clear selection + await page.keyboard.press('Escape') + }) + + await test.step('Test range selection with Shift+Click', async () => { + console.log('Testing Shift+Click range selection...') + + // Select first item + const firstItem = page.locator('#single-list [data-id="item-2"]') + await firstItem.click() + + // Select range to item 5 + const fifthItem = page.locator('#single-list [data-id="item-5"]') + await fifthItem.click({ modifiers: ['Shift'] }) + + const rangeSelected = await page.evaluate(() => { + return Array.from( + document.querySelectorAll('#single-list .sortable-selected') + ).map((el) => el.getAttribute('data-id')) + }) + console.log('Range selected items:', rangeSelected) + + // Should select items 2, 3, 4, 5 + expect(rangeSelected).toContain('item-2') + expect(rangeSelected).toContain('item-3') + expect(rangeSelected).toContain('item-4') + expect(rangeSelected).toContain('item-5') + }) + }) +}) diff --git a/tests/e2e/test-simple-cross.spec.ts b/tests/e2e/test-simple-cross.spec.ts new file mode 100644 index 0000000..562593a --- /dev/null +++ b/tests/e2e/test-simple-cross.spec.ts @@ -0,0 +1,55 @@ +import { test, expect } from '@playwright/test' + +test('simple cross-container test', async ({ page }) => { + await page.goto('http://localhost:5173/html-tests/test-horizontal-list.html') + await page.waitForLoadState('networkidle') + + // Log all console messages + page.on('console', (msg) => console.log(msg.text())) + + // Get initial counts + const initialList1 = await page.locator('#multi-1 .horizontal-item').count() + const initialList2 = await page.locator('#multi-2 .horizontal-item').count() + + console.log('Initial state:') + console.log(' List 1:', initialList1, 'items') + console.log(' List 2:', initialList2, 'items') + + // Try to drag first item from list 1 to list 2 + const source = page.locator('#multi-1 .horizontal-item').first() + const target = page.locator('#multi-2') + + // Check if item is draggable + const isDraggable = await source.evaluate( + (el) => (el as HTMLElement).draggable + ) + console.log('Item is draggable:', isDraggable) + + // Try drag using Playwright's dragTo + console.log('\nAttempting drag from List 1 to List 2...') + await source.dragTo(target, { timeout: 5000 }) + + // Wait for any animations + await page.waitForTimeout(500) + + // Check final counts + const finalList1 = await page.locator('#multi-1 .horizontal-item').count() + const finalList2 = await page.locator('#multi-2 .horizontal-item').count() + + console.log('\nFinal state:') + console.log(' List 1:', finalList1, 'items') + console.log(' List 2:', finalList2, 'items') + + // Check status message + const status = await page.locator('#status').textContent() + console.log(' Status:', status) + + // Verify the drag worked + if (finalList1 === initialList1 - 1 && finalList2 === initialList2 + 1) { + console.log('\n✅ Cross-container drag SUCCESSFUL!') + } else { + console.log( + '\n❌ Cross-container drag FAILED - items did not move between containers' + ) + } +}) diff --git a/tests/helpers/drag-helpers.ts b/tests/helpers/drag-helpers.ts new file mode 100644 index 0000000..640b3f7 --- /dev/null +++ b/tests/helpers/drag-helpers.ts @@ -0,0 +1,586 @@ +import { Page } from '@playwright/test' + +/** + * Drag and drop test helpers for Playwright + */ + +/** + * Performs a native HTML5 drag and drop operation + * Uses mouse events to simulate realistic drag behavior + */ +export async function dragAndDropNative( + page: Page, + sourceSelector: string, + targetSelector: string, + options?: { + sourcePosition?: { x: number; y: number } + targetPosition?: { x: number; y: number } + steps?: number + delay?: number + } +) { + const source = page.locator(sourceSelector).first() + const target = page.locator(targetSelector).first() + + const sourceBox = await source.boundingBox() + const targetBox = await target.boundingBox() + + if (!sourceBox || !targetBox) { + throw new Error('Could not get bounding boxes for source or target') + } + + const sourceX = + sourceBox.x + (options?.sourcePosition?.x ?? sourceBox.width / 2) + const sourceY = + sourceBox.y + (options?.sourcePosition?.y ?? sourceBox.height / 2) + const targetX = + targetBox.x + (options?.targetPosition?.x ?? targetBox.width / 2) + const targetY = + targetBox.y + (options?.targetPosition?.y ?? targetBox.height / 2) + + // Move to source + await page.mouse.move(sourceX, sourceY) + await page.mouse.down() + + // Wait a bit to ensure drag starts + await page.waitForTimeout(options?.delay ?? 100) + + // Move to target + await page.mouse.move(targetX, targetY, { steps: options?.steps ?? 5 }) + + // Wait before releasing + await page.waitForTimeout(options?.delay ?? 100) + + // Release + await page.mouse.up() +} + +/** + * Simulate drag using dispatchEvent for more control + */ +export async function simulateDragWithEvents( + page: Page, + sourceSelector: string, + targetSelector: string +) { + await page.evaluate( + ({ source, target }) => { + const sourceEl = document.querySelector(source) + const targetEl = document.querySelector(target) + + if (!sourceEl || !targetEl) { + throw new Error('Elements not found') + } + + // Create drag start event + const dragStartEvent = new DragEvent('dragstart', { + bubbles: true, + cancelable: true, + dataTransfer: new DataTransfer(), + }) + sourceEl.dispatchEvent(dragStartEvent) + + // Create drag over event on target + const dragOverEvent = new DragEvent('dragover', { + bubbles: true, + cancelable: true, + dataTransfer: dragStartEvent.dataTransfer, + }) + targetEl.dispatchEvent(dragOverEvent) + + // Create drop event + const dropEvent = new DragEvent('drop', { + bubbles: true, + cancelable: true, + dataTransfer: dragStartEvent.dataTransfer, + }) + targetEl.dispatchEvent(dropEvent) + + // Create drag end event + const dragEndEvent = new DragEvent('dragend', { + bubbles: true, + cancelable: true, + dataTransfer: dragStartEvent.dataTransfer, + }) + sourceEl.dispatchEvent(dragEndEvent) + }, + { source: sourceSelector, target: targetSelector } + ) +} + +/** + * Check if an element is draggable + */ +export async function isDraggable( + page: Page, + selector: string +): Promise { + return await page + .locator(selector) + .first() + .evaluate((el) => { + return (el as HTMLElement).draggable + }) +} + +/** + * Get the computed style of an element + */ +export async function getComputedStyle( + page: Page, + selector: string, + property: string +): Promise { + return await page + .locator(selector) + .first() + .evaluate((el, prop) => { + return window.getComputedStyle(el)[prop as any] + }, property) +} + +/** + * Monitor console logs during drag operations + * Returns an array that gets modified by reference + * as the logs are updated. + */ +export function monitorDragLogs(page: Page): string[] { + const logs: string[] = [] + page.on('console', (msg) => { + if ( + msg.text().includes('drag') || + msg.text().includes('Drag') || + msg.text().includes('DRAG') + ) { + logs.push(`[${msg.type()}] ${msg.text()}`) + } + }) + return logs +} + +/** + * Wait for drag to be ready (element is draggable and visible) + */ +export async function waitForDraggable(page: Page, selector: string) { + await page.waitForSelector(selector, { state: 'visible' }) + await page.waitForFunction( + (sel) => { + const el = document.querySelector(sel) as HTMLElement + return el && el.draggable === true + }, + selector, + { timeout: 5000 } + ) +} + +/** + * Attempt multiple drag strategies and report which works + */ +export async function tryMultipleDragStrategies( + page: Page, + sourceSelector: string, + targetSelector: string +): Promise<{ + nativeWorked: boolean + eventsWorked: boolean + dragToWorked: boolean + logs: string[] +}> { + const results = { + nativeWorked: false, + eventsWorked: false, + dragToWorked: false, + logs: [] as string[], + } + + const logs = monitorDragLogs(page) + + // Get initial position + const getItemPosition = async () => { + const items = await page.locator(sourceSelector).all() + return items.map(async (item) => await item.textContent()) + } + + const initialOrder = await getItemPosition() + + // Try native drag + try { + await dragAndDropNative(page, sourceSelector, targetSelector) + await page.waitForTimeout(500) + const afterNative = await getItemPosition() + results.nativeWorked = + JSON.stringify(initialOrder) !== JSON.stringify(afterNative) + } catch (e) { + results.logs.push(`Native drag failed: ${e}`) + } + + // Reset if needed + if (results.nativeWorked) { + await page.reload() + await page.waitForTimeout(1000) + } + + // Try Playwright's built-in dragTo + try { + const source = page.locator(sourceSelector).first() + const target = page.locator(targetSelector).first() + await source.dragTo(target) + await page.waitForTimeout(500) + const afterDragTo = await getItemPosition() + results.dragToWorked = + JSON.stringify(initialOrder) !== JSON.stringify(afterDragTo) + } catch (e) { + results.logs.push(`DragTo failed: ${e}`) + } + + results.logs = logs + return results +} + +/** + * Get the order of items in a container by their text content + * + * @param page - Playwright page object + * @param containerSelector - CSS selector for the container + * @param itemSelector - Optional CSS selector for items within container (defaults to all children) + * @returns Array of text content from each item + * + * @example + * const order = await getItemOrder(page, '#list', '.item') + * expect(order).toEqual(['Item 1', 'Item 2', 'Item 3']) + */ +export async function getItemOrder( + page: Page, + containerSelector: string, + itemSelector?: string +): Promise { + const selector = itemSelector + ? `${containerSelector} ${itemSelector}` + : `${containerSelector} > *` + return await page.locator(selector).allTextContents() +} + +/** + * Wait for the Resortable library to be loaded and ready + * + * @param page - Playwright page object + * @param timeout - Maximum time to wait in milliseconds (default: 5000) + * + * @example + * await waitForSortableReady(page) + * // Now safe to interact with sortable elements + */ +export async function waitForSortableReady( + page: Page, + timeout: number = 5000 +): Promise { + await page.waitForFunction(() => (window as any).resortableLoaded === true, { + timeout, + }) +} + +/** + * Inject event listeners to log drag events for debugging + * + * @param page - Playwright page object + * @param selector - CSS selector for the element to monitor + * @param events - Array of event names to listen for + * + * @example + * await injectEventLogger(page, '#sortable-list') + * // Now all drag events on #sortable-list will be logged to console + */ +export async function injectEventLogger( + page: Page, + selector: string, + events: string[] = [ + 'dragstart', + 'dragover', + 'drop', + 'dragend', + 'dragenter', + 'dragleave', + ] +): Promise { + await page.evaluate( + ({ sel, evts }) => { + const element = document.querySelector(sel) + if (element) { + evts.forEach((eventName) => { + element.addEventListener( + eventName, + (e) => { + const target = e.target as HTMLElement + const text = target.textContent || target.id || target.className + console.log(`[${eventName}] on ${text}`) + if (eventName === 'dragstart' || eventName === 'drop') { + console.log( + ` -> data: ${(e as DragEvent).dataTransfer?.types.join(', ')}` + ) + } + }, + true // Use capture phase + ) + }) + } + }, + { sel: selector, evts: events } + ) +} + +/** + * Simulate touch drag using pointer events + * Useful for testing touch device interactions + * + * @param page - Playwright page object + * @param sourceSelector - CSS selector for the element to drag + * @param targetSelector - CSS selector for the drop target + * @param options - Optional configuration for the drag + * + * @example + * await simulateTouchDrag(page, '.item:first-child', '.item:last-child') + */ +export async function simulateTouchDrag( + page: Page, + sourceSelector: string, + targetSelector: string, + options?: { steps?: number; delay?: number } +): Promise { + const source = page.locator(sourceSelector).first() + const target = page.locator(targetSelector).first() + + const sourceBox = await source.boundingBox() + const targetBox = await target.boundingBox() + + if (!sourceBox || !targetBox) { + throw new Error('Could not get bounding boxes for source or target') + } + + const sourceX = sourceBox.x + sourceBox.width / 2 + const sourceY = sourceBox.y + sourceBox.height / 2 + const targetX = targetBox.x + targetBox.width / 2 + const targetY = targetBox.y + targetBox.height / 2 + + // Start touch + await page.dispatchEvent(sourceSelector, 'pointerdown', { + button: 0, + pointerType: 'touch', + isPrimary: true, + clientX: sourceX, + clientY: sourceY, + }) + + await page.waitForTimeout(options?.delay ?? 100) + + // Move in steps + const steps = options?.steps ?? 5 + for (let i = 1; i <= steps; i++) { + const progress = i / steps + await page.dispatchEvent('body', 'pointermove', { + pointerType: 'touch', + isPrimary: true, + clientX: sourceX + (targetX - sourceX) * progress, + clientY: sourceY + (targetY - sourceY) * progress, + }) + await page.waitForTimeout(50) + } + + // End touch + await page.dispatchEvent('body', 'pointerup', { + pointerType: 'touch', + isPrimary: true, + clientX: targetX, + clientY: targetY, + }) +} + +/** + * Get comprehensive draggable state information for an element + * + * @param page - Playwright page object + * @param selector - CSS selector for the element to check + * @returns Object containing various draggable-related properties + * + * @example + * const state = await getDraggableState(page, '.sortable-item') + * expect(state.draggable).toBe(true) + * expect(state.cursor).toBe('move') + */ +export async function getDraggableState( + page: Page, + selector: string +): Promise<{ + draggable: boolean + display: string + cursor: string + userSelect: string + ariaGrabbed: string | null + tabIndex: number + classList: string[] +}> { + return await page + .locator(selector) + .first() + .evaluate((el: HTMLElement) => ({ + draggable: el.draggable, + display: window.getComputedStyle(el).display, + cursor: window.getComputedStyle(el).cursor, + userSelect: window.getComputedStyle(el).userSelect, + ariaGrabbed: el.getAttribute('aria-grabbed'), + tabIndex: el.tabIndex, + classList: Array.from(el.classList), + })) +} + +/** + * Hover over an element and wait for a specified duration + * Useful for testing hover states and delayed interactions + * + * @param page - Playwright page object + * @param selector - CSS selector for the element to hover + * @param delay - Time to wait after hovering in milliseconds + * + * @example + * await hoverAndWait(page, '.menu-item', 200) + * // Menu should now be expanded + */ +export async function hoverAndWait( + page: Page, + selector: string, + delay: number = 100 +): Promise { + await page.locator(selector).hover() + await page.waitForTimeout(delay) +} + +/** + * Get all data attributes from an element + * + * @param page - Playwright page object + * @param selector - CSS selector for the element + * @returns Object with all data-* attributes as key-value pairs + * + * @example + * const data = await getDataAttributes(page, '.item') + * expect(data['data-id']).toBe('item-1') + * expect(data['data-index']).toBe('0') + */ +export async function getDataAttributes( + page: Page, + selector: string +): Promise> { + return await page + .locator(selector) + .first() + .evaluate((el: HTMLElement) => { + const attrs: Record = {} + for (const attr of Array.from(el.attributes)) { + if (attr.name.startsWith('data-')) { + attrs[attr.name] = attr.value + } + } + return attrs + }) +} + +/** + * Verify that no drag operation occurred by comparing item order + * + * @param page - Playwright page object + * @param containerSelector - CSS selector for the container + * @param initialOrder - The initial order to compare against + * @param itemSelector - Optional CSS selector for items within container + * @returns true if order is unchanged, false if items moved + * + * @example + * const initialOrder = await getItemOrder(page, '#list') + * await someDragOperation() + * const unchanged = await verifyNoDrag(page, '#list', initialOrder) + * expect(unchanged).toBe(true) // Drag was prevented + */ +export async function verifyNoDrag( + page: Page, + containerSelector: string, + initialOrder: string[], + itemSelector?: string +): Promise { + const currentOrder = await getItemOrder(page, containerSelector, itemSelector) + return JSON.stringify(initialOrder) === JSON.stringify(currentOrder) +} + +/** + * Wait for drag animation to complete + * + * @param page - Playwright page object + * @param duration - Animation duration in milliseconds (default: 300) + * + * @example + * await dragAndDropNative(page, source, target) + * await waitForAnimation(page) + * // Now check final positions + */ +export async function waitForAnimation( + page: Page, + duration: number = 300 +): Promise { + await page.waitForTimeout(duration) +} + +/** + * Get the index of an element within its parent container + * + * @param page - Playwright page object + * @param selector - CSS selector for the element + * @returns Zero-based index of the element, or -1 if not found + * + * @example + * const index = await getElementIndex(page, '[data-id="item-3"]') + * expect(index).toBe(2) // Third item (0-indexed) + */ +export async function getElementIndex( + page: Page, + selector: string +): Promise { + return await page + .locator(selector) + .first() + .evaluate((el: HTMLElement) => { + const parent = el.parentElement + if (!parent) return -1 + return Array.from(parent.children).indexOf(el) + }) +} + +/** + * Simulate a multi-item drag operation + * Useful for testing multi-select drag functionality + * + * @param page - Playwright page object + * @param itemSelectors - Array of CSS selectors for items to select + * @param targetSelector - CSS selector for the drop target + * + * @example + * await simulateMultiDrag(page, ['.item:nth-child(1)', '.item:nth-child(3)'], '#target-list') + */ +export async function simulateMultiDrag( + page: Page, + itemSelectors: string[], + targetSelector: string +): Promise { + // Select items with Ctrl/Cmd+Click + for (let i = 0; i < itemSelectors.length; i++) { + const selector = itemSelectors[i] + if (i === 0) { + // First item: regular click + await page.locator(selector).click() + } else { + // Additional items: Ctrl+Click + await page.locator(selector).click({ modifiers: ['Control'] }) + } + } + + // Drag the first selected item (others should follow) + const firstItem = page.locator(itemSelectors[0]).first() + const target = page.locator(targetSelector).first() + await firstItem.dragTo(target) +}