Vue项目使用Moveable库拖拽元素时控件不跟随移动问题求助

问题原因 #

你遇到的控件不跟随移动是两个核心配置错误导致的：

1. 未显式指定target属性，错误将Moveable组件本身作为操作目标
2. 仅监听拖拽事件但未将位移同步应用到目标元素的样式上，Moveable不会自动修改目标元素的位置/尺寸属性，需要手动在事件回调中更新

修复步骤 #

1. 补充响应式坐标变量与target配置
   在Vue的data中新增存储位移的x、y变量，同时在moveable配置中指定要操作的目标元素选择器：

data() {
  return {
    x: 0,
    y: 0,
    moveable: {
      draggable: true,
      throttleDrag: 0,
      resizable: true,
      throttleResize: 1,
      keepRatio: false,
      scalable: true,
      throttleScale: 0,
      rotatable: true,
      throttleRotate: 0,
      pinchable: true,
      origin: false,
      target: '.moveable-target' // 新增：指定要控制的目标元素
    }
  }
}

2. 调整HTML结构，拆分目标元素与Moveable控制组件
   不要将可操作内容放在Moveable标签内部，要拆分为独立的目标元素，同时绑定位移样式：

<div id="editor">
  <!-- 独立的可操作目标元素 -->
  <div class="moveable-target" :style="{transform: `translate(${x}px, ${y}px)`}">
    <span>This is moveable div</span>
  </div>
  <!-- Moveable仅作为控制组件单独使用 -->
  <Moveable
    class="moveable"
    v-bind="moveable"
    @drag="handleDrag"
    @resize="handleResize"
    @scale="handleScale"
    @rotate="handleRotate"
    @warp="handleWarp"
    @pinch="handlePinch"
  />
</div>

3. 补全事件回调逻辑，同步更新元素属性
   在对应事件中更新变量或者直接修改目标元素样式：

methods: {
  handleDrag(e) {
    // 同步位移到变量
    this.x = e.left
    this.y = e.top
  },
  handleResize(e) {
    // 同步尺寸+位移
    e.target.style.width = `${e.width}px`
    e.target.style.height = `${e.height}px`
    this.x = e.left
    this.y = e.top
  },
  // 其余scale、rotate等事件参考官方文档对应参数同步样式即可
}

你之前添加的container属性是用于设置拖拽的边界范围，和控件跟随问题无关，按上述步骤修改后即可正常使用。

内容的提问来源于stack exchange，提问作者chandradot99