Wishlist reorder: restrict drag to handle only

[Copilot]

Accidental reorders triggered whenever users clicked and dragged anywhere on a wish item — including mid-item scroll gestures. Drag should only activate from the left-side handle (⠿).

Changes

Desktop (HTML5 drag)

• draggable="false" on .wish-item by default; toggled to true only on mousedown of .wish-drag-handle
• A self-removing document mouseup listener resets draggable regardless of where the mouse is released
• dragend also resets draggable as a fallback

Mobile (touch)

• Added touchStartedOnHandle flag — touch drag activation in touchmove is gated on the touch having originated on the handle; touches elsewhere fall through to normal scroll

CSS

• Removed cursor: grab from .wish-item; grab cursor now only appears on .wish-drag-handle

handle.addEventListener('mousedown', () => {
    el.setAttribute('draggable', 'true');
    const resetDraggable = () => {
        el.setAttribute('draggable', 'false');
        document.removeEventListener('mouseup', resetDraggable);
    };
    document.addEventListener('mouseup', resetDraggable);
});

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Wish list reorder</issue_title>
<issue_description>Users are frustrated because items in the wishlist get accidentally reordered. When clicking and dragging from the left side handle, the user should be able to rearrange things. If they are clicking and scrolling in the middle, they are just trying to scroll the page, not reorder items</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Wish list reorder #51

---

⌨️ Start Copilot coding agent tasks without leaving your editor — available in VS Code, Visual Studio, JetBrains IDEs and Eclipse.