vue 组件拖拽

需求：将一个组件拖动至页面任何位置，记录并回显

要拖动的组件：

         
 文本 

拖动后的组件：

说明（如果是需要拖动一个组件并且回显在同一个组件，那么只需要将两个 div 的 style 组合就起来就可以了）我得项目里需求是需要多个组件，所以就是用了 for 循环，再次拖动的时候就传入 item，index，根据此参数修改组件对象的 left 和 top 记录位置

           

{{item.content}}
            

 开始拖拽的方法，记录刚开始拖拽时组件的位置：

// 开始拖拽位置
    dragstart(e, item, index) {this.left = this.$refs['ceshi'].getBoundingClientRect().left// 记录组件拖拽时的位置
      this.top = this.$refs['ceshi'].getBoundingClientRect().top},
    dragstart1(e, item, index) {
      this.left = e.clientX * 1
      this.top = e.clientY * 1
    },

拖拽后的方法，将拖拽后组件的位置存到数组中（mediaFrameList[index].flLeft）：

  // 停止拖拽位置
    dragend(e, item, index) {
      let x = e.clientX - this.left
      let y = e.clientY - this.top
      const width = this.$refs.canvas.offsetWidth;
      const height = this.$refs.canvas.offsetHeight;

      this.mediaFrameList[index].flLeft = item.flLeft + x
      this.mediaFrameList[index].flTop = item.flTop + y
    }
 dragend1(e, item, content, flType) {
      let x = e.clientX - this.left
      let y = e.clientY - this.top
        this.mediaFrameList.push({
        flLeft: item.left + x,
        flTop: item.top + y,
        }）}

最后，我上面的代码由于逻辑比较多，所以不看也行，拿着我下面的代码就是一个简单的 demo，没有使用任何插件

可以以这个为基础，这个开发空间还是很大的，比如：我在项目中还添加了设置组件的字体、字号、居中等等很多属性，自由度很高，还有回显示添加的等比缩，等比放大