vue element-ui实现图片鼠标控制图片移动

最新推荐文章于 2024-07-05 10:59:37 发布

IamIceKing

最新推荐文章于 2024-07-05 10:59:37 发布

阅读量1.9k

点赞数

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

本文链接：https://blog.csdn.net/liuleping0114/article/details/105801995

版权

本文介绍如何在Vue项目中使用Element-UI组件库，通过监听鼠标事件和计算偏移量，实现图片元素的拖动移动效果，为用户界面添加交互性。

摘要由CSDN通过智能技术生成

<el-scrollbar
  class="scrollbar"
  wrap-class="scrollbar-wrap"
  view-class="scrollbar-view"
  ref="scrollbar"
>
  <img :src='imgSrc' @mousedown="clickThumbHandler" draggable="false"/>
</el-scrollbar>

clickThumbHandler(e) {
  e.stopImmediatePropagation();
  this.cursorDown = true;
  this.move = null
  this.downPos = {
    x: 0,
    y: 0
  }
  on(document, 'mousemove', this.mouseMoveDocumentHandler);
  on(document, 'mouseup', this.mouseUpDocumentHandler);
},
mouseMoveDocumentHandler(e) {
  const step = 15
  const wrap = this.$refs.scrollbar.$refs.wrap
  if(this.cursorDown) {
    if(!this.move) {
      this.move = {
        dx: e.clientX - this.downPos.x,
        dy: e.clientY - this.downPos.y
      }
    } else {
      if(this.move.dx > e.cl