vue 拖拽（笔记）

最新推荐文章于 2025-06-21 07:02:03 发布

阿川阿川

最新推荐文章于 2025-06-21 07:02:03 发布

阅读量749

点赞数

分类专栏： vue 文章标签： vue拖拽

vue 专栏收录该内容

67 篇文章

订阅专栏

博客提及在Vue拖拽场景下获取index时需要注意相关要点，同时给出了文章作者、来源及原文链接，并声明了版权，转载需附上博文链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div
  @mousedown="areaListInfo($event, index, item)"
  ref="areaListDrag"
  @mouseup="handleMouseUp($event, index, item)"
>

注意：获取index，需要注意这里。

data () {
  return {
    moveDataelse: {
      index: null
      x: null,
      y: null
    }
  }
},

areaListInfo (event, index, item) {
  this.moveDataelse.index = index
  this.moveDataelse.x = event.pageX - this.$refs.areaListDrag[index].offsetLeft
  this.moveDataelse.y = event.pageY - this.$refs.areaListDrag[index].offsetTop
  event.currentTarget.style.cursor = 'move'
  window.onmousemove = this.HandleMouseMove
},
HandleMouseMove (event) {
  let moveLeft = integer(event.pageX - this.moveDataelse.x) + 'px'
  let moveTop = integer(event.pageY - this.moveDataelse.y) + 'px'
  this.$refs.areaListDrag[this.moveDataelse.index].style.left = moveLeft
  this.$refs.areaListDrag[this.moveDataelse.index].style.top = moveTop
},
handleMouseUp (event, index, item) {
  window.onmousemove = null
  event.currentTarget.style.cursor = 'move'
  console.log('鼠标松开了')
}

感谢作者：
作者：胭脂ing
来源：优快云
原文：https://blog.youkuaiyun.com/zhumizhumi/article/details/88715861
版权声明：本文为博主原创文章，转载请附上博文链接！