HTML 拖拉功能的实现代码

// 父容器核心样式

  width: 100%;
  height: 100%;

// 子容器核心样式
  position: absolute;
  : 50%;
  left: 50%;
  transform: translate(-50%,-50%);

/
 在子容器创建的时候获取子容器相对于父容器的  和 left 位置
/

mounted () {
  this.left = this.$refs.fatherBox.offsetLeft
  this. = this.$refs.fatherBox.offsetTop
}

/
 鼠标按下时
 1. 开启允许子容器移动的 flag
 2. 记录鼠标点击时的位置信息
/

mouseDown (e) {
  // 设置允许弹窗移动的 flag
  this.moveFlag = true
  // 保存鼠标开始位置
  this.startLeft = e.clientX - this.left
  this.startTop = e.clientY - this.
}

/
 鼠标移动时
 1. 判断 flag 是否允许子容器移动
 2. 设置弹框左边位置
 3. 设置弹框右边位置
/

move (e) {
  // 判断 flag 是否允许移动
  if (!this.moveFlag) return

  // 设置弹框左边位置
  this.left = e.clientX - this.startLeft
  // 设置弹框右边位置
  this. = e.clientY - this.startTop

}

/
 鼠标按键弹起时
 1. 关闭允许子容器移动的 flag
/

mouseUp (e) {
  this.flag = false
}

/
 父组件代码片段 jsx 版
/

export default {
  props: {
    playList: {
      type: Array,
      required: true
    }
  },
  render () {
    return (
      <div style={{width: '100%', height: '100%'}} ref={'father'}>
        {
          this.playList && this.playList.map((item, index) => {
            return (
              <ChildComponents
                key={index}
                ref={index}
                zIndex={index}
                visible={true}
                backValue={this.backValue}
                info={item}
                width={600}
                height={400}
              />
            )
          })
        }
      </div>
    )
  },
  methods: {
    backValue (left, , zIndex) {
      this.$refs[zIndex].$el.style. = `${}px`
      this.$refs[zIndex].$el.style.left = `${left}px`
    }
  }
}

<!-- 父组件代码片段 vue 文件版 -->

<template>
  <div
    ref="father"
    style"width: 100%, height: 100%"
  >
    <ChildComponents
      v-for="(item, index) in playList"
      :key="index"
      :ref="index"
      :visible="true"
      :z-index="index"
      :back-value="backValue"
      :info="item"
      :close="close"
      :width="600"
      :height="400"
    />
  </div>
</template>
<script>
export default {
  ponents: {
    VideoPlayerModal
  },
  props: {
    playList: {
      type: Array,
      required: true
    }
  },
  methods: {
    backValue (left, , zIndex) {
      this.$refs[zIndex][0].$el.style. = `${}px`
      this.$refs[zIndex][0].$el.style.left = `${left}px`
    }
  }
}
</script>

/
 1. this.width 数据为父组件传递进来的 width 值，或者子组件本身设置的默认值
 2. this.height 数据为父组件传递进来的 height 值，或者子组件本身设置的默认值
/

move (e) {
  // 判断 flag 是否允许移动
  if (!this.moveFlag) return

  // 判断是否超出左边视图
      if (this.$refs.fatherBox.offsetLeft < this.width / 2) {
        // 禁止弹框移动
        this.moveFlag = false
        // 设置弹框左边位置
        this.left = this.width / 2 + 10
        // 调用回调函数把偏移量暴露给父组件
        this.backValue(this.left, this., this.zIndex)
        return
      }

      // 判断是否超出右边视图
      if (this.$refs.fatherBox.offsetLeft > document.body.clientWidth - this.width / 2) {
        // 禁止弹框移动
        this.moveFlag = false
        // 设置弹框右边位置
        this.left = document.body.clientWidth - this.width / 2 - 10
        // 调用回调函数把偏移量暴露给父组件
        this.backValue(this.left, this., this.zIndex)
        return
      }

      // 判断是否超出顶部视图
      if (this.$refs.fatherBox.offsetTop < this.height / 2 + 70) {
        // 禁止弹框移动
        this.moveFlag = false
        // 设置弹框顶部位置
        this. = this.height / 2 + 70 + 10
        // 调用回调函数把偏移量暴露给父组件
        this.backValue(this.left, this., this.zIndex)
        return
      }

      // 判断是否超出底部视图
      if (this.$refs.fatherBox.offsetTop > document.body.clientHeight - this.height / 2 - 50) {
        // 禁止弹框移动
        this.moveFlag = false
        // 设置弹框底部位置
        this. = document.body.clientHeight - this.height / 2 - 50 - 10
        // 调用回调函数把偏移量暴露给父组件
        this.backValue(this.left, this., this.zIndex)
        return
      }

      // 设置弹框左边位置
      this.left = e.clientX - this.startLeft
      // 设置弹框右边位置
      this. = e.clientY - this.startTop

      // 调用回调函数把偏移量暴露给父组件
      this.backValue(this.left, this., this.zIndex)
}

mouseOut (e) {
  this.moveFlag = false
}