Touch-enabled Drag To Select Component For Vue.js

Install & Download:

# NPM
$ npm install drag-select-vue --save

Description:

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:

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

Default props.

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

Preview: