Multi-Select

click to select item

1☰

2☰

3☰

4☰

5☰

6☰

7☰

8☰

9☰

10☰

<template>
  <div ref="listRef">
    <div v-for="item in 10" :key="item" class="item">
      <span>{{ item }}</span>
      <span class="handle">☰</span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';

const dnd = ref();
const listRef = ref();

onMounted(() => {
  if (!import.meta.env.SSR) { 
    import('../../src/index').then((module) => {
      const Sortable = module.default;
       dnd.value = new Sortable(listRef.value, {
        multiple: true,
        handle: '.handle',
        chosenClass: 'chosen',
        selectedClass: 'selected',
      });
    });
  }
});

onUnmounted(() => {
  dnd.value.destroy();
});
</script>

<style scoped>
.item {
  border-radius: 5px;
  box-shadow: 0px 2px 5px -2px #57bbb4;
  padding: 8px;
  margin-bottom: 5px;
}

.selected {
  background-color: #57bbb4;
}

.handle {
  float: right;
  cursor: move;
}

.chosen {
  box-shadow: 0px 0px 5px 1px #1984ff;
}
</style>