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>
Default Open in playground

Draggable Items:

Item 1
Item 2
Drag items here to add them 
<form class="gc-full-width">
  <.drop_zone id="drag-and-drop-single-default">
    <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_empty_state>
            Drag items here to add them
          </.drag_empty_state>
        </.drop_zone>
      </.box>
    </div>
  </.drop_zone>
</form>
With dragging placeholder Open in playground

Draggable Items:

Item 1
Item 2
Drag items here to add them 
<form class="gc-full-width">
  <.drop_zone id="drag-and-drop-single-with-dragging-placeholder">
    <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>
  </.drop_zone>
</form>