🔧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

Attribute | Description | Type | Default -|-|-|- modelValue / v-model | binding value | Array | Set<string | number> | --(required) background | background color of drag area, 'none' represent hide this style to avoid override background color of class | string | rgba(66, 153, 225, 0.5 | draggableOnOption | can draggable when dragstart event target on DragSelectOption | boolean | true clickOptionToSelect | whether to enable the click item selection function | boolean | true clickBlankToClear | whether to enable clicking on blank content to clear the option | boolean | true dragAreaClass | the class names of drag area | string | -- dragAreaStyle | the class styles of drag area | string | -- selectedOptionClass | the class names of selected DragSelectOption | string | -- selectedOptionStyle | the selected styles of selected DragSelectOption | string | -- multiple | whether to keep the previously selected | boolean | -- activeMultipleKeys | after pressing a certain key, multiple mode will be activated | 'meta' | 'shift' | 'ctrl' | 'alt' | 'meta' | 'ctrl' | 'shift' deselectRepeated | in multiple mode, deselect options that are repeatedly selected | boolean | --

DragSelectOption Attributes

Attribute | Description | Type | Default -|-|-|- value | binding value | string | index | --(required) disabled | whether DragSelectOption is disabled | boolean | false selectedClass | the class names of selected option | boolean | --

Component classNames

this package havn't enough styles,you can use following classNames to add styles. name | Description -|- drag-select__wrapper | the className of DragSelect itself drag-select | the className of the container of dragSelectOption drag-select__area | the className of drag area drag-select-option | the className of dragSelectOption component drag-select-option--selected | the className of dragSelectOption component which are selected drag-select-option--disabled | the className of dragSelectOption component which are disabled