HTML drag and drop function implementation code

// Parent container core style width: 100%;
  height: 100%;

//Subcontainer core style position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

/*
* Get the top and left position of the child container relative to the parent container when the child container is created */

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

/*
* When the mouse is pressed* 1. Enable the flag that allows child containers to move
* 2. Record the location information when the mouse is clicked*/

mouseDown (e) {
  // Set the flag to allow pop-up window to move
  this.moveFlag = true
  // Save the starting position of the mouse this.startLeft = e.clientX - this.left
  this.startTop = e.clientY - this.top
}

/*
* When the mouse moves* 1. Determine whether the flag allows the child container to move* 2. Set the left position of the pop-up box* 3. Set the right position of the pop-up box*/

move (e) {
  // Check if flag allows movement if (!this.moveFlag) return

  // Set the left position of the bullet box this.left = e.clientX - this.startLeft
  // Set the right position of the bullet box this.top = e.clientY - this.startTop

}

/*
* When the mouse button is released* 1. Turn off the flag that allows child containers to move
*/

mouseUp (e) {
  this.flag = false
}

/*
* Parent component code snippet jsx version */

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, top, zIndex) {
      this.$refs[zIndex].$el.style.top = `${top}px`
      this.$refs[zIndex].$el.style.left = `${left}px`
    }
  }
}

<!-- Parent component code snippet vue file version -->

<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 {
  components:
    VideoPlayerModal
  },
  props: {
    playList: {
      type: Array,
      required: true
    }
  },
  methods: {
    backValue (left, top, zIndex) {
      this.$refs[zIndex][0].$el.style.top = `${top}px`
      this.$refs[zIndex][0].$el.style.left = `${left}px`
    }
  }
}
</script>

/*
* 1. this.width data is the width value passed in by the parent component, or the default value set by the child component itself* 2. this.height data is the height value passed in by the parent component, or the default value set by the child component itself*/

move (e) {
  // Check if flag allows movement if (!this.moveFlag) return

  // Determine whether it exceeds the left view if (this.$refs.fatherBox.offsetLeft < this.width / 2) {
        // Disable the pop-up box from moving this.moveFlag = false
        // Set the left position of the bullet box this.left = this.width / 2 + 10
        // Call the callback function to expose the offset to the parent component this.backValue(this.left, this.top, this.zIndex)
        return
      }

      // Determine whether it exceeds the right view if (this.$refs.fatherBox.offsetLeft > document.body.clientWidth - this.width / 2) {
        // Disable the pop-up box from moving this.moveFlag = false
        // Set the right position of the bullet box this.left = document.body.clientWidth - this.width / 2 - 10
        // Call the callback function to expose the offset to the parent component this.backValue(this.left, this.top, this.zIndex)
        return
      }

      // Determine whether it exceeds the top view if (this.$refs.fatherBox.offsetTop < this.height / 2 + 70) {
        // Disable the pop-up box from moving this.moveFlag = false
        // Set the top position of the bullet box this.top = this.height / 2 + 70 + 10
        // Call the callback function to expose the offset to the parent component this.backValue(this.left, this.top, this.zIndex)
        return
      }

      // Determine whether it exceeds the bottom view if (this.$refs.fatherBox.offsetTop > document.body.clientHeight - this.height / 2 - 50) {
        // Disable the pop-up box from moving this.moveFlag = false
        // Set the bottom position of the bullet box this.top = document.body.clientHeight - this.height / 2 - 50 - 10
        // Call the callback function to expose the offset to the parent component this.backValue(this.left, this.top, this.zIndex)
        return
      }

      // Set the left position of the bullet box this.left = e.clientX - this.startLeft
      // Set the right position of the bullet box this.top = e.clientY - this.startTop

      // Call the callback function to expose the offset to the parent component this.backValue(this.left, this.top, this.zIndex)
}

mouseOut (e) {
  this.moveFlag = false
}