vue-drag-select

🔧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<string> \| 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	--
<!-- disabled	whether DragSelect is disabled	boolean	false -->

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

Package detail

@coleqiu/vue-drag-select

readme