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

Question

您好，在使用 mouse 选择项目时，我面临着非常具有挑战性和有趣的滚动问题。双向拖动，即上下

这是截图

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

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

触发 change当文件选择发生变化时。

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

编辑 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

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

请帮助我提前谢谢!!

Answer 1

我建议您使用 DragSelect js库。

工作演示

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);
    }
  });
}