GroupCollect 1.3.142

Drag And Drop

Renders a drop zone that can receive dragged items.

Read more Read less

Examples

<.drop_zone id="my-drop-zone">
  <.p>Drop items here</.p>
</.drop_zone>

<.drop_zone id="document-zone" class="my-custom-class">
  <%= for item <- @items do %>
    <div><%= item.name %></div>
  <% end %>
</.drop_zone>

Draggable Items:

Item 1
Item 2
Drag items here to add them
Attribute Type Documentation Default Value
Required id * :string

Unique ID for the drop zone
class :any

Additional classes to add to the drop zone
[]
rest :global
Required inner_block * :slot 
<div>
  <.box border="sm" padding="xl" id="draggable-pool" phx-hook="GC_DragDrop">
    <p class="gc-font-weight-semibold gc-margin-bottom-sm">Draggable Items:</p>
    <.draggable id="item-1">
      Item 1
    </.draggable>
    <.draggable id="item-2">
      Item 2
    </.draggable>
  </.box>
  <.box border="sm" padding="2xl">
    <.drop_zone id="dropzone-1">
      <.drag_placeholder>
        Drop items here
      </.drag_placeholder>
      <.drag_empty_state>
        Drag items here to add them
      </.drag_empty_state>
    </.drop_zone>
  </.box>
</div>