Custom Handles

Use the moveHandle and resizeHandle snippets to create custom drag and resize controls. This restricts interaction to specific elements.

Code

svelte

<GridItem x={0} y={0} w={3} h={4}>
  {#snippet moveHandle({ moveStart })}
    <div onpointerdown={moveStart} class="cursor-move">
      Drag here
    </div>
  {/snippet}

  {#snippet children()}
    <div>Content area</div>
  {/snippet}

  {#snippet resizeHandle({ resizeStart })}
    <button onpointerdown={resizeStart} class="cursor-se-resize">
      ↘
    </button>
  {/snippet}
</GridItem>