Dragging by handle?

[ghtx280]

Is there a way to drag a certain place in it, but not the entire block (or maybe even outside it), a so-called handle?

[ghtx280]

 ondragstart={(e) => {
    if (!document.elementsFromPoint(e.clientX, e.clientY).includes(handleElem)) {
      e.preventDefault();
    }
  }}

Found this hack

[eric-blue]

which element did you place this on?

[ghtx280]

which element did you place this on?

on wrapper element

[eric-blue]

amazing thanks for that. I'm doing a composition approach so it turned out simpler to add a data-handle attr

mine is an adaptation of the nested example from the docs

<Draggable.Item {item} 
    containerId={`${id}:${itemIndex}`} 
    class="group relative p-0 bg-transparent ring-transparent flex items-center flex-row gap-2 hover:ring-transparent"
    ondragstart={(e) => {
        if (!document.elementsFromPoint(e.clientX, e.clientY).some(el => el.getAttribute('data-handle') === 'true')) {
            e.preventDefault();
        }
    }}
>
    <GripVertical data-handle="true" size="1rem" class="opacity-0 h-full group-hover:opacity-100 transition-opacity duration-220 absolute top-0 -left-5" />
    {@render child(item)}
</Draggable.Item>