'Javascript - Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

I have this code in my vue component

<template>
  <div class="container-fluid p-0">
    <div class="row m-0">
      <div class="col-12 vh-100 p-0" @drop="drop($event)" @dragover.prevent id="camView">
        <canvas class="position-absolute top-0 end-0" ref="targetImg" id="targetImg"></canvas>
        <div class="position-absolute" id="selection" draggable="true" @dragstart="drag($event)"></div>
        <img src="@/assets/lu.jpeg" class="img-fluid" id="srcImg" ref="srcImg">
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'DropView',
  data() {
    return {

    }
  },
  mounted() {
 
  },
  methods: {
    drag(e) {
      console.log(e)
      e.dataTransfer.setData('text', e.target.id);
    },
    drop(e) {
      console.log(e)
      e.preventDefault();
      let data = e.dataTransfer.getData('text');
      console.log(data)
      let box = document.getElementById(data)
      console.log(box)
      e.target.appendChild(box);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.col-12 {
  #selection {
    width: 360px;
    height: 240px;
    border-style: dashed;
    border-width: 1px;
    border-color: white;
    background-color: transparent;
    z-index: 1;
  }
  #target-img {
    overflow: hidden;
    width: 320px;
    height: 240px;
    z-index: 1;
  }
  #srcImg {
    height: 100%;
    display: block;
    width: 100%;
    object-fit: cover;
  }
}
</style>

I'm trying to use drag and drop to moove a div that is positioned on top of an image. I'm able to start the drag operation but when I release the div into another position I will get this error in console

Vue warn]: Unhandled error during execution of native event handler 
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

I've noticed that the div will disappear and is not mooved. Is there any fix?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source