Vue-drag-select: Drag to select plugin

Vue-drag-select A lightweight yet customizable Vue component to enable drag-to-select functionality in your app.

Installation

npm i @coleqiu/vue-drag-select

yarn add @coleqiu/vue-drag-select

Demo

Storybook

Quick Guide

Import

import { createApp } from "vue";
import VueDragSelect from "@coleqiu/vue-drag-select";

const app = createApp(App);
app.use(VueDragSelect);

Usage

<script setup lang="ts">
import { ref } from 'vue';

const selection = ref([]);
const options = [ "item1", "item2", "item3" ];
</script>

<template>
  <drag-select v-model="selection">
    <drag-select-option v-for="item in options" :value="item" :key="item">{{item}}</drag-select-option>
  </drag-select>
</template>

<style>
.drag-select-option {
  width: 100px;
  height: 100px;
  color: #ffffff;
  background: #E37E26;
}

.drag-select-option--selected {
  color: #000000;
  background: #5fdddc;
}
</style>

Ducumentation

DragSelect Attributes

DragSelectOption Attributes

Component classNames