Skip to content

Instantly share code, notes, and snippets.

@ftes
Last active October 4, 2021 14:17
Show Gist options
  • Save ftes/a84ea9111887eb07df2ecc82ea46203b to your computer and use it in GitHub Desktop.
Save ftes/a84ea9111887eb07df2ecc82ea46203b to your computer and use it in GitHub Desktop.
Drag and drop on the PETAL(S) stack
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment