div横向拖拽vue

要实现 div 横向拖拽，可以使用 Vue.js 和一些 JavaScript 库来实现。

首先，在 Vue.js 中创建一个拖拽事件。你可以使用 `v-on:mousemove` 来监听鼠标移动事件，并使用 `v-on:mousedown` 来监听鼠标按下事件。在鼠标按下事件中，你需要记录鼠标的当前位置。

接下来，在鼠标移动事件中，你需要计算鼠标的偏移量，并将偏移量添加到 div 的 left 样式中。这将使 div 沿着 x 轴移动。

当鼠标释放时，你需要清除鼠标事件监听器。

最后，你需要将这些逻辑封装在一个 Vue.js 组件中，以便在应用程序中使用。以下是一个简单的示例：

<template>
  <div class="container">
    <div class="box" v-bind:style="{ left: left + 'px' }"
         v-on:mousedown="startDrag($event)">
      {{ content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      left: 0,
      startX: 0,
      dragging: false,
    };
  },
  props: {
    content: {
      type: String,
      default: 'Hello World!',
    },
  },
  methods: {
    startDrag(event) {
      this.dragging = true;
      this.startX = event.clientX;
      window.addEventListener('mousemove', this.drag);
      window.addEventListener('mouseup', this.stopDrag);
    },
    drag(event) {
      if (!this.dragging) {
        return;
      }
      const deltaX = event.clientX - this.startX;
      this.left += deltaX;
      this.startX = event.clientX;
    },
    stopDrag() {
      this.dragging = false;
      window.removeEventListener('mousemove', this.drag);
      window.removeEventListener('mouseup', this.stopDrag);
    },
  },
};
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #f5f5f5;
}

.box {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: move;
}
</style>

在这个示例中，我们创建了一个 div 容器，并创建了一个包含文本内容的 div，并将其绑定到数据模型中。当用户按下鼠标并开始拖动 div 时，我们记录 div 的当前位置，并在每次移动时计算偏移量。当用户释放鼠标时，我们清除鼠标事件监听器。