stephan281094 / vue-drag-select Goto Github PK

View Code? Open in Web Editor NEW

75.0 5.0 27.0 1.54 MB

A Vue component for drag selecting elements. Inspired by react-drag-select.

Vue 85.58% JavaScript 14.42%

vue javascript dom

vue-drag-select's Introduction

Vue Drag to Select Component

A Vue component for drag selecting elements. Inspired by react-drag-select.

Demo

Visit the demo here.

Usage

Add vue-drag-select to your project:

$ yarn add vue-drag-select # or npm i --save vue-drag-select

Import the component and add it to your template:

import DragSelect from 'vue-drag-select/src/DragSelect.vue'

export default {
  components: {
    'drag-select-container': DragSelect
  }
}

Wrap the items that you want to be selectable in the drag-select-container with a selectorClass property and a scoped slot:

<template>
  <drag-select-container selectorClass="itemToBeSelected">
    <template slot-scope="{ selectedItems }">
      <!-- Your items here -->
    </template>
  </drag-select-container>
</template>

Then write your own logic to make items look selected. For instance by applying a class.

License

MIT

vue-drag-select's People

Contributors

Stargazers

Watchers

vue-drag-select's Issues

support click and multi selection

hi, i viewed your library and learned a lot. Would you plan to add click item to select and multi select when use enter ctrl or command ? i overwrite your code and do that on my way. the demo is here: demo
If you are interested in this, i hope i can pull request to your code.
best wishes.

'selectionEnd' event

I would appreciate something like 'selectionEnd' event to handle change after the user completed his selection, instead of during the selection. I believe this should behave like onMouseUp but fire only when the underlying selection was changed.

My use case is: I need to start resource-intensive computations after the selection is made. It does not make sense to start it after every change.

when page scrolled, the selectionBox will out of the selection

expand / reduce selction with strg - click

hi there, this is a very useful component,
is it possible to integrate a select/deselect function, so you can expand/reduce the selection with strg - mouseclick on items
if not planned can you give me a hint, how to start to implement it
thank you very much
marc

selectedItems should be the array of vue components when the child elements are vue components

My code has broken after I uprade 0.1.2 to 0.1.3, because the selectedItems is a HTMLCollection instead of the array of vue components, and I can't use the component property or method.

Make `selectorClass` accept function

If selectorClass accepts function as value, it could be used for more expressive checks, e.g.

<drag-select-container :selectorClass="vm => vm.$el.hasClass('item')">
	<template scope="{ selectedItems }">
		<!-- ... -->
	</template>
</drag-select-container>

But with this name selectorClass is not descriptive enough. Maybe rename it to something like selectableItem?

Not work properly with 'simplebar'

the drag area is not holded when scroll.
drag area work like 'fixed'. so it select new item without old item.

simplebar : https://github.com/Grsmto/simplebar

for test you should install simplebar

npm install --save simplebar-vue

and this is the code for testing

<template>
  <div class="app">
    <h1>Vue Drag Select Example</h1>
    <simple-bar>
        <drag-select-container selectorClass="item">
          <template slot-scope="{ selectedItems }">
            <div
              v-for="item in 50"
              :key="item"
              :class="getClasses(item, selectedItems)"
              :data-item="item"
            >
              Item {{ item }}
            </div>
          </template>
        </drag-select-container>
    </simple-bar>
  </div>
</template>

<script>
import DragSelect from "vue-drag-select";

import SimpleBar from 'simplebar-vue';
import 'simplebar/dist/simplebar.css';

export default {
  name: "home",

  components: {
    SimpleBar,
    "drag-select-container": DragSelect
  },

  methods: {
    getClasses(item, selectedItems) {
      const isActive = !!selectedItems.find(selectedItem => {
        return parseInt(selectedItem.dataset.item, 10) === item;
      });

      return {
        item: true,
        active: isActive
      };
    }
  }
};
</script>

<style>
/* skiped other css in example */
.simplebar-wrapper {
    max-height: 500px;
}
</style>

thanks...