Re-usable drag handle example

Hey, I’ve created a somewhat more re-usable drag handle example based on the example from the readme: REPL

The usage is simple:

const { dragHandleZone, dragHandle } = createDragHandle();
// on drag zone
use:dragHandleZone={{ /** dndzone options **/ }}
  
// on drag handle
use:dragHandle

[isaacHagoel]

@zahachtah good catch. the official example (no action) had the same issue. the fix is to add mouseup and touchend listeners to the handle and have them disable drag. the same solution should work for the action. i will fix when i have a chance

[benbro]

I’m trying to use this action with nested zones. There is a parent list of items - zone-0. Each item has a list of sub-items - separate zone-n for each sub-items list. I thought of adding a type parameter to the dragHandle action and make the drag store a Set of drag-able types. Did anyone extend this action to support multiple zones and nested zones?

const drag = writable(new Set());

function dragHandle(node, type) {
    function startDrag(e) {
        // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
        e.preventDefault();
        $drag = $drag.add(type);
    }
}

<button use:dragHandle={{type: 'zone1'}}>
<button use:dragHandle={{type: 'zone2'}}>