vue 窗口拖拽不要离开页面

要实现vue窗口拖拽不要离开页面的功能，可以使用HTML5的drag事件和Vue的指令结合实现。

首先，在窗口容器上添加v-drag指令，并在指令中绑定drag事件。

然后，在drag事件中实现窗口的拖拽功能，并判断拖拽时是否超出页面边界。

具体代码如下：

<template>
  <div class="window" v-drag></div>
</template>

<script>
export default {
  directives: {
    drag: {
      bind(el, binding) {
        let startX, startY, initialMouseX, initialMouseY;
        el.addEventListener("dragstart", function (e) {
          startX = el.offsetLeft;
          startY = el.offsetTop;
          initialMouseX = e.clientX;
          initialMouseY = e.clientY;
          e.dataTransfer.setDragImage(el, 0, 0);
        });
        el.addEventListener("drag", function (e) {
          const dx = e.clientX - initialMouseX;
          const dy = e.clientY - initialMouseY;
          const offsetX = startX + dx;
          const offsetY = startY + dy;
          if (
            offsetX >= 0 &&
            offsetY >= 0 &&
            offsetX + el.offsetWidth <= window.innerWidth &&
            offsetY + el.offsetHeight <= window.innerHeight
          ) {
            el.style.left = offsetX + "px";
            el.style.top = offsetY + "px";
          }
        });
      },
    },
  },
};
</script>

<style>
.window {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
</style>

在上面的代码中，我们使用了HTML5的drag事件来实现窗口的拖拽功能。在v-drag指令中绑定了dragstart和drag事件，分别用于获取窗口的初始位置和拖拽时的位置信息，并在drag事件中实现了窗口的拖拽效果。同时，我们还使用了offsetLeft、offsetTop、offsetWidth和offsetHeight等属性来判断窗口是否超出页面边界。