返回

让方块在盒子里自由舞蹈：揭秘Vue中的拖拽移动

前端

在Vue的浩瀚世界里，元素的移动犹如一场优雅的华尔兹，而我们手中的代码便是指挥这支舞会的指挥棒。今天，我们踏上探索之旅，去探寻如何让方块在盒子里自由穿梭，谱写一场视觉盛宴。

华丽的开场：创建盒子与方块

我们首先为这场舞蹈搭建舞台。我们使用了一个简单的HTML结构：一个父盒子，里面嵌套一个子方块，就像这样：

<div class="box">
  <div class="block"></div>
</div>

定位方块：进入舞台中央

为了让方块能够在盒子里移动，我们需要对其进行绝对定位。我们通过CSS为方块设置position: absolute;。这就像给方块穿上了一双溜冰鞋，让它可以自由地在盒子里滑行。

.block {
  position: absolute;
}

监听鼠标移动：捕捉方块的舞步

现在，方块已经准备就绪，我们需要为它添加一些响应性，让他能够随着我们的鼠标移动而起舞。我们使用@mousemove事件监听器，当鼠标在盒子上移动时，就会触发此事件。

mounted() {
  this.$el.addEventListener("mousemove", this.handleMouseMove);
},

计算方块偏移：跟随鼠标的节奏

在handleMouseMove方法中，我们将计算方块相对于盒子的偏移量。这让我们能够根据鼠标的移动来更新方块的位置。

handleMouseMove(event) {
  const { offsetX, offsetY } = event;
  const boxRect = this.$el.getBoundingClientRect();
  this.blockOffsetX = offsetX - boxRect.left;
  this.blockOffsetY = offsetY - boxRect.top;
},

更新方块位置：让方块在盒子里漫步

有了偏移量，我们就可以使用它们来更新方块的top和left样式属性，从而让方块随着鼠标的移动而移动。

updated() {
  this.$refs.block.style.top = this.blockOffsetY + "px";
  this.$refs.block.style.left = this.blockOffsetX + "px";
},

华丽谢幕：让方块自由穿梭

至此，我们已经完成了让方块在盒子里拖拽移动的所有步骤。通过巧妙地使用HTML布局、CSS样式和JavaScript事件监听，我们赋予了方块生命，让他能够在盒子里自由舞蹈，为我们的Web应用程序增添了互动性。