Drag To Select Component For Vue.js – Drag-Selector

Install & Download:

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

Description:

Drag-Selector is a Vue.js component that allows the visitor to select multiple items via mouse drag.

How to use it:

Import the Drag-Selector component.

import VueDragSelector from "vue-drag-selector";
Vue.use(VueDragSelector);

Basic usage:

<template>
  <div>
    <drag-selector v-model="checkedList"
                   @change="handleDragSelectorChange" class="drag-selector">
      <drag-selector-item v-for="(item, index) in myDragList"
                          :value="item"
                          :key="index" class="drag-selector__item">
          {{ item }}
      </drag-selector-item>
    </drag-selector>
    {{ checkedList }}
  </div>
</template>

export default {
  name: "app",
  data() {
    return {
      checkedList: [],
      myDragList: [
        { a: 1, b: 5 },
        { a: 2, b: 6 },
        { a: 3, b: 7 }
      ]
    };
  },
  methods: {
    handleDragSelectorChange(checkedList) {
      console.log(checkedList);
    }
  }
};

Preview: