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

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:

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

Download Details:

Author: xubaifuCode

Live Demo: https://xubaifucode.github.io/vue-drag-selector/example/demo.html

Download Link: https://github.com/xubaifuCode/vue-drag-selector/archive/master.zip

Official Website: https://github.com/xubaifuCode/vue-drag-selector

Last Update: August 6, 2019

Install:

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

You Might Be Interested In:

Add Comment