Drag & Drop List Example Fix

Problem

The Drag & Drop List example had two issues:

Root Cause

The example was passing a simple string array instead of an array of objects:

// ❌ WRONG - String array
'items': '["Item 1", "Item 2", "Item 3"]'

But the component expects items to be objects with an id property:

// From component documentation (line 4):
//   - items: JSON array of items with { id, content } structure

Why It Failed

Looking at the component code:

const movedItem = this.items[oldIndex];  // Works for strings
this.items.splice(oldIndex, 1);          // Works for strings
this.items.splice(newIndex, 0, movedItem); // Works for strings

this.pc.publish({
  topic: `${this.topic}.reorder`,
  data: {
    items: this.items,  // Array of strings instead of objects
    from: oldIndex,
    to: newIndex
  }
});

<div class="list-item" data-id="${item.id}" data-index="${index}">
                                    ^^^^^^^^ undefined for strings!

<slot name="item-${item.id}">
                   ^^^^^^^^ undefined for strings!

${item.content || item.label || item.title || JSON.stringify(item)}
     ^^^^^^^^^^^^  undefined for strings, eventually calls JSON.stringify("Item 1") = '"Item 1"'

The Error

When items are strings:

Solution

Changed the example to use properly formatted item objects with id and content:

{
  id: 'drag-drop',
  name: 'Drag & Drop List',
  description: 'Reorderable drag and drop list',
  components: [
    {
      name: 'drag-drop-list',
      attributes: {
        'topic': 'list',
        'items': JSON.stringify([
          { id: 1, content: '📝 Task 1: Review code' },
          { id: 2, content: '🎨 Task 2: Update designs' },
          { id: 3, content: '🚀 Task 3: Deploy to production' },
          { id: 4, content: '📊 Task 4: Analyze metrics' }
        ])
      }
    }
  ]
}

Enhancements Made

Item Object Format

The component supports flexible item formats:

Required

• id (number or string) - Unique identifier for the item

Content (one of these):

• content - Main display content (preferred)
• label - Alternative to content
• title - Alternative to content
• Any other properties - Will be JSON.stringify'd

Example Formats

{ id: 1, content: 'Task 1' }

{ id: 'task-1', content: '📝 Review code' }

{ id: 'item-1', label: 'First Item' }

{ id: 1, title: 'Important Task' }

{ id: 1, name: 'Task', priority: 'high', completed: false }
// Displays: {"name":"Task","priority":"high","completed":false}

Testing

Before Fix

1. Load "Drag & Drop List" example
2. See: Three items ("Item 1", "Item 2", "Item 3")
3. Drag items to reorder
4. Open PAN Monitor
5. See: No messages appear ❌
6. Check console
7. See: Error at line 155 or undefined attribute values ❌

After Fix

1. Load "Drag & Drop List" example
2. See: Four tasks with emojis ✅
3. Open PAN Monitor
4. Drag "Task 3" above "Task 1"
5. See: PAN message appears ✅
   Topic: list.reorder
   Data: {
     items: [{id: 1, content: '📝 Task 1: Review code'}, ...],
     from: 2,
     to: 0
   }
6. Check console
7. See: No errors ✅

PAN Messages

Reorder Event

Topic: {topic}.reorder
Data: {
  items: [
    { id: 1, content: '📝 Task 1: Review code' },
    { id: 2, content: '🎨 Task 2: Update designs' },
    { id: 3, content: '🚀 Task 3: Deploy to production' },
    { id: 4, content: '📊 Task 4: Analyze metrics' }
  ],
  from: 2,  // Original index
  to: 0     // New index
}

Drop Event

Topic: {topic}.drop
Data: {
  item: { id: 3, content: '🚀 Task 3: Deploy to production' },
  index: 0
}

PAN Subscriptions

The component also listens to control topics:

Set Items

pc.publish({
  topic: 'list.setItems',
  data: {
    items: [
      { id: 1, content: 'New item 1' },
      { id: 2, content: 'New item 2' }
    ]
  }
});

Add Item

pc.publish({
  topic: 'list.addItem',
  data: {
    item: { id: 5, content: 'New task' },
    index: 2  // Optional, defaults to end
  }
});

Remove Item

pc.publish({
  topic: 'list.removeItem',
  data: {
    id: 3  // Remove item with id: 3
  }
});

Component Features

Drag Handle

attributes: {
  'handle': '.drag-handle',
  'items': JSON.stringify([
    { id: 1, content: '<span class="drag-handle">⚡</span> Item 1' }
  ])
}

Disabled State

attributes: {
  'disabled': 'true',
  'items': '...'
}

Empty State

<div class="empty-state">
  <slot name="empty">No items to display</slot>
</div>

Custom Slots

// In your HTML:
<drag-drop-list items='[{"id":1,"content":"Item 1"}]'>
  <div slot="item-1">
    <strong>Custom content for item 1</strong>
  </div>
</drag-drop-list>

Example Variations

Task List with Priorities

'items': JSON.stringify([
  { id: 1, content: '🔴 High: Fix critical bug' },
  { id: 2, content: '🟡 Medium: Update docs' },
  { id: 3, content: '🟢 Low: Refactor code' }
])

Shopping List

'items': JSON.stringify([
  { id: 1, content: '🥖 Bread' },
  { id: 2, content: '🥛 Milk' },
  { id: 3, content: '🍎 Apples' },
  { id: 4, content: '🧀 Cheese' }
])

File Manager

'items': JSON.stringify([
  { id: 1, content: '📁 Documents' },
  { id: 2, content: '📁 Pictures' },
  { id: 3, content: '📁 Downloads' },
  { id: 4, content: '📄 README.md' }
])

Playlist

'items': JSON.stringify([
  { id: 1, content: '🎵 Song 1 - Artist A' },
  { id: 2, content: '🎵 Song 2 - Artist B' },
  { id: 3, content: '🎵 Song 3 - Artist C' }
])

Files Changed

/Users/cdr/Projects/larc-repos/playground/examples.mjs

// Before:
'items': '["Item 1", "Item 2", "Item 3"]'

// After:
'items': JSON.stringify([
  { id: 1, content: '📝 Task 1: Review code' },
  { id: 2, content: '🎨 Task 2: Update designs' },
  { id: 3, content: '🚀 Task 3: Deploy to production' },
  { id: 4, content: '📊 Task 4: Analyze metrics' }
])

Also changed topic from list.reordered to list (more standard).

Pattern Recognition

This is now the third example with the same issue:

Common Pattern

Rule of Thumb

Prevention

For new examples with array attributes:

• ✅ Check component documentation first
• ✅ Use objects with required properties
• ✅ Include IDs when needed
• ✅ Test with PAN Monitor open
• ❌ Don't use simple string/number arrays

Summary

The drag & drop list was fixed by changing the items from a simple string array to an array of properly formatted objects with id and content properties. Now:

• ✅ Items display correctly with emojis
• ✅ Drag and drop works smoothly
• ✅ PAN messages appear in monitor
• ✅ No console errors
• ✅ Reorder data includes full item objects