Touch-enabled Drag To Select Component For Vue.js


A touch-enabled drag to select component that enables the user to select multiple items in a group via drag and touch events.

How to use it:

1. Install and import.

import Vue from 'vue';
import DragSelect from "./DragSelect.vue";

2. Register the component.

export default {
  components: { DragSelect },
  data() {
    return { selectedItems: [] };

3. In your app template:

    v-slot="{ selected }"
    @change="selectedItems = $event"
      v-for="item in 24"
        'shadow-outline': selected.includes(String(item))
      {{ item }}
  Selected items:
  <div v-for="item in selectedItems" :key="item">
    {{ item }}

Default props.

attribute: {
  type: String,
  required: true
color: {
  type: String,
  default: "#4299E1"
opacity: {
  type: Number,
  default: 0.7


Touch-enabled Drag To Select Component For Vue.js

Download Details:

Author: andi23rosca

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm install drag-select-vue --save

You Might Be Interested In:

Add Comment