vue2x添加一个元素拖拽功能

拖拽元素绑定：

 
<div class="add-twin-wrap-container">
    <div class="add-twin-wrap" @click.stop>
          <p class="title" @mousedown="onDragStart">
            添加场景类型实例
            <span class="icon iconfont avw-cancel" @click="$emit('close-dialog')"></span>
          </p>
          <div class="twin-cont">
          ...........
          </div>
     </div>
 </div>

初始化元素样式：

  mounted() {
    // 初始化 left/top，使拖动计算准确
    const dialog = this.$el.querySelector('.add-twin-wrap');
    const rect = dialog.getBoundingClientRect();
    dialog.style.left = `${rect.left}px`;
    dialog.style.top = `${rect.top}px`;
  },

 

添加拖拽监听方法：

methods: {
  // ...原来的方法不动
  onDragStart(e) {
    const dialog = this.$el.querySelector('.add-twin-wrap');
    const rect = dialog.getBoundingClientRect();

    // 鼠标点击位置相对弹窗左上角的偏移
    const offsetX = e.clientX - rect.left;
    const offsetY = e.clientY - rect.top;

    // 防止选中文字
    document.body.style.userSelect = 'none';

    const onMouseMove = (moveEvent) => {
      const left = moveEvent.clientX - offsetX;
      const top = moveEvent.clientY - offsetY;

      // 限制不要拖出屏幕
      const maxLeft = window.innerWidth - rect.width;
      const maxTop = window.innerHeight - rect.height;

      dialog.style.left = Math.min(Math.max(0, left), maxLeft) + 'px';
      dialog.style.top = Math.min(Math.max(0, top), maxTop) + 'px';
    };

    const onMouseUp = () => {
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
      document.body.style.userSelect = '';
    };

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  },
}