Press "Enter" to skip to content

A Simple Vue Drag Selector Component Library

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.