Drag and drop on the PETAL(S) stack

grid_with_drag_and_drop.html

<div
  x-data="{dragging: false}"
  :hook="GridWithDragAndDrop"
>
  {#for %{x: x, y: y} = item <- @data}
    <div
      id={item[:id]}
      draggable="true"
      ...
    >
      <#slot :args={item: item} />
    </div>
  {/for}

  {#for {x, y} <- drop_targets(@data, @width, @height)}
    <div
      style={'grid-column': x, 'grid-row': y}
      data-x={x}
      data-y={y}
      x-on:drop.self={"
        dragging = false;
        const from = {id: document.getElementById(event.dataTransfer.getData('text/plain')).id};
        const to = event.target.dataset;
        const hook = window.phxHooks.GridWithDragAndDrop[$root.id];
        hook.pushEvent('#{@dragged.name}', {from, to});
      "}
      ...
    >
      <div class="flex flex-grow" :class="{invisible: dragging}">
        <#slot name="empty" />
       </div>
    </div>
  {/for}
</div>