Not work properly with 'simplebar'

[dev-jonghoonpark]

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...

[stephan281094]

Hi there, thank you for taking the time to report this issue!

Looking through the documentation of simplebar, I noticed that it's not intended to be used on the body element. Currently, Vue Drag Select looks for scroll positions in the drag-select-container, falling back to document.body. It does not detect the scroll position in the parent (in this case the simplebar component).

I suppose we could add a prop that allows you to specify what scroll container to listen to. Would that work for you?

[dev-jonghoonpark]

Yes. I think that would work to me. thanks! :>