Press "Enter" to skip to content

Directive To Create Mouse Selection Of Objects In Vue.js Applications

Vue-SELECTABLE, it is a common task to determine the mouse for some of the objects on the page. This directive makes this task very easy, all you need to carry out the choice of the object is a few lines of code. It is designed after the optional jQuery Selectable, with some borrowed details of the angular multiple selections.

It supports the choice of the ordinary mouse and the addition to the predetermined values while pressing the CTRL key during the selection. Individual items can be excluded from the selection using CTRL + click on it. The document or some of the specified blocks is also passed while choosing now, but only on the Y-axis.

vue selectable component, vue select example, v select vuejs, vue 3 select component, vue js dropdown select, vue select options, vue select multiple, vue select option group

Smooth Touch-Enabled Selectable JavaScript Library | selectable.js plugin

How to make use of it:

Install & Download:

$ npm install vue-selectable  --save

Usage

<div v-selectable="{ 
         selectedGetter: selectedGetter, 
         selectedSetter: selectedSetter, 
         selectingSetter: selectingSetter
         }" id="app">
        <div class="selection"></div>
        <div v-for="(i, item) in items"
             :class="{ selected: !!selected[i], selecting: !!selecting[i] }"
         	 class="selectable" >{{ item }}</div>
</div>
import selectable from 'vue-selectable';

new Vue({
    el: '#app',
    data: {
        selected: [],
        selecting: [],
        items: ['abc', 'bcd', 'cde']
    },
    directives: { selectable },
    methods: {
        selectedGetter() { return this.selected; },
        selectedSetter(v) { this.selected = v; },
        selectingSetter(v) { this.selecting = v; }
    }
});

vue.js selectable component, vue-selectable Plugin/Github


See Demo And Download

Official Website(JSmith01): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.