定义指令

在 src/directives/index.js 文件中用指令形式添加拖拽代码如下：

// 文档拖拽
export const drag = {
  inserted: function () {
    const body = document.getElementsByTagName("body")[0];
    document.onkeydown = function (event) {
      // 清理掉默认事件
      event.preventDefault();

      const spaceKey = event.key === " ";
      if (spaceKey) {
        body.style.cursor = "grab";
      }

      // 左键按下
      document.onmousedown = function (ev) {
        const pageX = ev.pageX;
        const pageY = ev.pageY;

        if (spaceKey && ev.button === 0) {
          // 开始拖拽
          document.onmousemove = function (ev) {
            // 向左拖拽
            if (ev.pageX > pageX) {
              document.documentElement.scrollLeft -= 15;
            }

            // 向右拖拽
            if (ev.pageX < pageX) {
              document.documentElement.scrollLeft += 15;
            }

            // 向下拖拽
            if (ev.pageY > pageY) {
              document.documentElement.scrollTop -= 15;
            }

            // 向上拖拽
            if (ev.pageY < pageY) {
              document.documentElement.scrollTop += 15;
            }
          };

          // 左键抬起，结束拖拽
          document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        }
      };
    };

    document.onkeyup = function () {
      body.style.cursor = "default";
      document.onmousemove = null;
      document.onmouseup = null;
      document.onmousedown = null;
    };
  },
};

组件引用

在 src/views/demo.vue 文件中引入指令，并配置：

<template>
  <div v-drag>
    <div class="container">
      <div class="container-item" v-for="item in 100" :key="item">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Non voluptates
        perspiciatis ducimus ullam laudantium aperiam praesentium aliquid veniam
        vitae accusantium esse quae, ut, perferendis earum cumque sunt sint
        labore cupiditate.
      </div>
    </div>
  </div>
</template>

<script>
import { drag } from "@/directives/index";
export default {
  directives: { drag },
};
</script>

<style scoped>
.container {
  width: 2700px;
}
.container::after {
  content: " ";
  display: block;
  clear: both;
}
.container-item {
  width: 300px;
  border: 1px solid #000;
  padding: 10px 30px;
  margin: 10px;
  float: left;
}
</style>

页面使用

在页面上，按下空格键鼠标会变成手状，然后按下鼠标左键不要放开就可以自由拖拽整个页面了。