Drag-Selector is a Vue.js component that allows the visitor to select multiple items by dragging with the mouse.

drag select javascript, npm drag to select, react native drag and select, vue js drag to select, react table drag select

How to make use of it:

Install

npm i vue-drag-selector

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

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>

<script>
  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);
      }
    }
  };
</script>

drag to select component, Vue-Drag-Selector Plugin/Github

See Demo And Download

Official Website(xubaifuCode): Click Here

This superior jQuery/javascript plugin is developed by xubaifuCode. For extra advanced usage, please go to the official website.