如何在vue中用鼠标选择项目时滚动

您好，我在选择项目时面临着非常具有挑战性和有趣的滚动问题mouse向两个方向拖动 i,e上和下

这是一个屏幕截图

这是我的代码 : https://codesandbox.io/s/select-ivwq8j?file=/src/overridden/Drag-select.vue

Drag-select.vue是写入拖动选择逻辑的文件。

哪个火change当文件选择发生更改时。

我在这里收到那些更改事件<drag-select-container @change="dragSelect($event)">

Edit 1:IVO GELO 评论后

我已经在里面添加了drag()功能

   try{
      let containerEl = document.querySelector('#wrapping_container');
      let container = containerEl.getBoundingClientRect();
      if(box.top > (container.top )){
          containerEl.scrollTop = box.top - 50;
          return true;
      }
    }catch(e){
      console.log(e);
    } 

在这里编辑代码： https://codesandbox.io/s/select-ivwq8j?file=/src/overridden/Drag-select.vue

这是一个非常有趣且具有挑战性的问题，所以

请帮助我提前谢谢！

我建议你使用DragSelectjs 库。

工作演示

https://codesandbox.io/s/select-forked-tnmnwk?file=/src/components/HelloWorld.vue

mounted() {
  const vm = this;

  const ds = new DragSelect({
    selectables: document.querySelectorAll(".selectable-nodes"),
    area: document.getElementById("area"),
    draggability: false,
  });

  ds.subscribe("elementselect", function ({ item }) {
    vm.selectedItems.push();
  });

  ds.subscribe("elementunselect", function ({ item }) {
    const index = vm.selectedItems.indexOf(item.getAttribute("customAttribute"));
    if (index > -1) {
      vm.selectedItems.splice(index, 1);
    }
  });
}