Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

lbecket's avatar
Level 39

Vuedraggable - prevent items sharing an location

I have the following vue 2 component that uses the vuedraggable library. This renders two rows of four "drop zones" for a total of 8 areas that are capable of holding the draggable items (of which I have created two). These items should be able to reside in any of the eight locations, just not simultaneously. The dragging aspect works as expected, but I don't know how to prevent these draggable items from sharing the same drop zone.

<template>
  <div>
    <div v-for="(row, i) in rows" :key="i" class="row">
      <div v-for="item in row.items" :key="item.key" class="col">
        <draggable class="drop-zone" group="items" :data-ref="item.key">
          <div v-if="item.name" class="draggable-item">
            {{ item.name }}
          </div>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      rows: [
        {
          items: [
            { key: 1, name: "One" },
            { key: 2, name: "Two" },
            { key: 3, name: null },
            { key: 4, name: null },
          ],
        },
        {
          items: [
            { key: 5, name: null },
            { key: 6, name: null },
            { key: 7, name: null },
            { key: 8, name: null },
          ],
        },
      ],
    };
  },
};
</script>

<style scoped>
.row {
  padding: 10px;
  display: flex;
}
.col {
  padding: 10px;
  display: flex;
}
.drop-zone {
  min-height: 60px;
  padding: 10px;
  background-color: lightgray;
  display: flex;
  width: 100%;
}
.draggable-item {
  padding: 10px;
  background-color: red;
  cursor: grab;
  display: flex;
  width: 100%;
}
</style>

There is also the undesirable behavior where an item that is dropped outside of a drop zone will fall to the closest zone and I would like to prevent that, i.e. a draggable item must be placed within the drop zone or else it should not be moved.

I appreciate any guidance that you're able to offer!

0 likes
1 reply

Please or to participate in this conversation.