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.

vue-drag-select badge.svg?token=HRF6OPQ1SB badge.svg vue-drag-select


npm i @coleqiu/vue-drag-select
yarn add @coleqiu/vue-drag-select



Edit vue-drag-select-example

Quick Guide


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

const app = createApp(App);


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

const selection = ref([]);
const options = [ "item1", "item2", "item3" ];

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

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

.drag-select-option--selected {
  color: #000000;
  background: #5fdddc;


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
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 --
<!-- 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