Drag and Drop using alpine.js

drag-and-drop-using-alpine-js.markdown

Drag and Drop using alpine.js

A Pen by Trevor Morris on CodePen.

License.

index.html

<div class="drag-and-drop" x-data="{ adding: false, removing: false }">
    <div class="drag-and-drop__container drag-and-drop__container--from">
        <h3 class="drag-and-drop__title">From</h3>
        <ul
            class="drag-and-drop__items"
            :class="{ 'drag-and-drop__items--removing': removing }"
            x-on:drop="removing = false"
            x-on:drop.prevent="
                const target = event.target.closest('ul');
                const element = document.getElementById(event.dataTransfer.getData('text/plain'));
                target.appendChild(element);
            "
            x-on:dragover.prevent="removing = true"
            x-on:dragleave.prevent="removing = false">
            <!-- loop through the items -->
            <li
                id="item-1"
                class="drag-and-drop__item"
                :class="{ 'drag-and-drop__item--dragging': dragging }"
                x-on:dragstart.self="
                    dragging = true;
                    event.dataTransfer.effectAllowed='move';
                    event.dataTransfer.setData('text/plain', event.target.id);
                "
                x-on:dragend="dragging = false"
                x-data="{ dragging: false }"
                draggable="true">
                Your Item #1
            </li>
            <li
                id="item-2"
                class="drag-and-drop__item"
                :class="{ 'drag-and-drop__item--dragging': dragging }"
                x-on:dragstart.self="
                    dragging = true;
                    event.dataTransfer.effectAllowed='move';
                    event.dataTransfer.setData('text/plain', event.target.id);
                "
                x-on:dragend="dragging = false"
                x-data="{ dragging: false }"
                draggable="true">
                Your Item #2
            </li>
            <li
                id="item-3"
                class="drag-and-drop__item"
                :class="{ 'drag-and-drop__item--dragging': dragging }"
                x-on:dragstart.self="
                    dragging = true;
                    event.dataTransfer.effectAllowed='move';
                    event.dataTransfer.setData('text/plain', event.target.id);
                "
                x-on:dragend="dragging = false"
                x-data="{ dragging: false }"
                draggable="true">
                Your Item #3
            </li>
            <li
                id="item-4"
                class="drag-and-drop__item"
                :class="{ 'drag-and-drop__item--dragging': dragging }"
                x-on:dragstart.self="
                    dragging = true;
                    event.dataTransfer.effectAllowed='move';
                    event.dataTransfer.setData('text/plain', event.target.id);
                "
                x-on:dragend="dragging = false"
                x-data="{ dragging: false }"
                draggable="true">
                Your Item #4
            </li>
            <li
                id="item-5"
                class="drag-and-drop__item"
                :class="{ 'drag-and-drop__item--dragging': dragging }"
                x-on:dragstart.self="
                    dragging = true;
                    event.dataTransfer.effectAllowed='move';
                    event.dataTransfer.setData('text/plain', event.target.id);
                "
                x-on:dragend="dragging = false"
                x-data="{ dragging: false }"
                draggable="true">
                Your Item #5
            </li>
            <li
                id="item-6"
                class="drag-and-drop__item"
                :class="{ 'drag-and-drop__item--dragging': dragging }"
                x-on:dragstart.self="
                    dragging = true;
                    event.dataTransfer.effectAllowed='move';
                    event.dataTransfer.setData('text/plain', event.target.id);
                "
                x-on:dragend="dragging = false"
                x-data="{ dragging: false }"
                draggable="true">
                Your Item #6
            </li>
        </ul>
    </div>
    <div class="drag-and-drop__divider">⇄</div>
    <div class="drag-and-drop__container drag-and-drop__container--to">
        <h3 class="drag-and-drop__title">To</h3>
        <ul
            class="drag-and-drop__items"
            :class="{ 'drag-and-drop__items--adding': adding }"
            x-on:drop="adding = false"
            x-on:drop.prevent="
                const target = event.target.closest('ul');
                const element = document.getElementById(event.dataTransfer.getData('text/plain'));
                target.appendChild(element);
            "
            x-on:dragover.prevent="adding = true"
            x-on:dragleave.prevent="adding = false">
            <!-- loop through the already selected items -->
        </ul>
    </div>
</div>

script.js

// EMPTY, thanks to alpine.js

scripts

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>

style.scss

.drag-and-drop {
  display: flex;
  max-width: 760px;
  padding: 20px;
  margin: 0 auto;

  &__container {
    position: relative;
    overflow: hidden;
    width: 50%;
    border: 1px solid #ccc;
    border-radius: 10px;
  }

  &__divider {
    padding: 10px;
    font-size: 20px;
    align-self: center;
  }

  &__title {
    padding: 15px 20px;
    font-size: 20px;
    background: #ddd;
  }

  &__items {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 150px;
    margin: 0 -1px;
    padding-bottom: 40px;
    border-top: 1px solid #ccc;

    &--adding {
      background-color: #9AE6B4;
    }

    &--removing {
      background-color: #FBD38D;
    }
  }

  &__item {
    padding: 15px 20px;
    border: 1px solid #ccc;
    border-top: 0;
    line-height: 1;
    cursor: move;
    background-color: #fff;

    &:hover {
      background-color: #eee;
    }

    &--dragging {
      color: #ccc !important;
      background-color: #fff !important;
    }
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.1/tailwind.min.css" rel="stylesheet" />