vue 可视化页面 拖拽 布局

可以使用第三方组件库如Element UI或者iview，它们提供了拖拽布局的组件。另外也可以使用Vue的自定义指令来实现拖拽布局，具体实现可以参考以下步骤：

1. 给需要拖拽的元素绑定一个自定义指令，例如v-draggable。

2. 在指令的bind函数中，给元素添加mousedown、mousemove、mouseup事件监听器。

3. 在mousedown事件中，记录下鼠标的初始位置和元素的初始位置。

4. 在mousemove事件中，计算鼠标的偏移量，并将元素的位置设置为鼠标位置减去偏移量。

5. 在mouseup事件中，取消mousemove和mouseup事件的监听器。

6. 可以通过计算元素的位置，来判断元素是否进入了其他容器中，从而实现拖拽布局。

示例代码如下：

// 拖拽指令
Vue.directive('draggable', {
  bind(el, binding, vnode) {
    let startX, startY, initialMouseX, initialMouseY;
    let startLeft, startTop;
    let dragging = false;

    // 鼠标按下事件
    el.addEventListener('mousedown', (e) => {
      startX = el.offsetLeft;
      startY = el.offsetTop;
      initialMouseX = e.clientX;
      initialMouseY = e.clientY;
      startLeft = parseInt(window.getComputedStyle(el).getPropertyValue('left'));
      startTop = parseInt(window.getComputedStyle(el).getPropertyValue('top'));
      dragging = true;

      // 添加mousemove和mouseup事件
      document.addEventListener('mousemove', mousemove);
      document.addEventListener('mouseup', mouseup);
      e.preventDefault();
    });

    // mousemove事件
    const mousemove = (e) => {
      if (dragging) {
        let dx = e.clientX - initialMouseX;
        let dy = e.clientY - initialMouseY;
        el.style.left = startLeft + dx + 'px';
        el.style.top = startTop + dy + 'px';
      }
    };

    // mouseup事件
    const mouseup = () => {
      dragging = false;
      document.removeEventListener('mousemove', mousemove);
      document.removeEventListener('mouseup', mouseup);
    };
  }
});

使用示例：

<template>
  <div class="container">
    <div class="box" v-draggable>拖拽我</div>
  </div>
</template>

注意：上述代码只实现了拖拽，如需实现拖拽布局，还需要计算元素的位置，判断是否进入其他容器中，根据具体需求进行实现。