img图片拖拽查看（draggable）

实现div框内img图片拖拽自由（使用ondragstart/ondragover/ondragend实现功能）

场景：图片列表展示（单个展示同理这里用循环展示）

<div v-for="(value, index) in checkData" :key="index" :id="value.fileId" class="imgPar">
        <img
          draggable="true"
          :src="value.fileUrl"
          @dragstart="dragstart(value)"
          @dragover="dragover(value)"
          @dragend="dragend(value)"
          @load="setImgHeight($event, index)"
        >
</div>

        在上述代码中，首先我们定义了一个可以拖动的图片。图片的draggable="true"属性表示它是可以拖动的。

        当开始拖动图片时，ondragstart（@dragstart）事件会被触发，然后执行dragstart(value)函数。  拖动结束时，ondragend（@dragend）事件会被触发，然后执行dragend(value)函数。

  dragstart和dragend事件中处理了拖拽逻辑，但是没有在鼠标移动的过程中更新图片的位置，这就是为什么图片会直接跳到最后的位置，而不是跟随鼠标移动。

        添加一个dragover事件处理器，在这个处理器中，实时地更新了图片的位置。这样，图片就可以跟随鼠标的移动而移动了。

  data() {
    return {
      imgHeights: [],
    }
  },
    // 拖拽开始
    dragstart(value) {
      var img = document.getElementById(value.fileId).firstChild
      this.offsetX = event.clientX - img.offsetLeft
      this.offsetY = event.clientY - img.offsetTop
    },
    // 次函数可以不用
    dragover(value) {
      event.preventDefault()
      var img = document.getElementById(value.fileId).firstChild
      var x = event.clientX - this.offsetX
      var y = event.clientY - this.offsetY
      img.style.left = x + 'px'
      img.style.top = y + 'px'
    },
    // 拖拽结束
    dragend(value) {
      var img = document.getElementById(value.fileId).firstChild
      var imgContainer = document.getElementById(value.fileId)
      var x = event.clientX - this.offsetX
      var y = event.clientY - this.offsetY
      x = Math.max(0, Math.min(x, imgContainer.offsetWidth - img.offsetWidth))
      y = Math.max(0, Math.min(y, imgContainer.offsetHeight - img.offsetHeight))
      img.style.left = x + 'px'
      img.style.top = y + 'px'
    },
    // 获取图片的高度保存
    setImgHeight(event, index) {
      this.$set(this.imgHeights, index, event.target.offsetHeight)
    },

         这里为了动态控制每个div的高度，可以通过绑定style属性来动态地设置一个元素的样式。如果你想让div的高度动态地获取图片的高度，你需要首先在你的数据中保存这个高度，然后在style属性中使用这个高度。你可以在img元素的load事件中获取图片的高度，然后保存到你的数据中。

 <div :style="{ height: imgHeights[index] + 'px' }">
        <img>
 </div>

.imgPar {
  border: 1px solid #ccc;
  margin: 0 auto;
  overflow: hidden;
  overflow-x: auto;
  position: relative;
  // height: auto;
  img {
    margin: auto;
    display: block;
    width: 30%;
    position: absolute;
    left: 50%;
    transform：translateX(-50%)
  }
}