JSFiddle - React, Tailwind, and code Playground

HTML

<div id='dragEle' draggable="true">drag</div>
<div id='dropEle'></div>

CSS

#dragEle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: #ff0;
    transform: translate(0, 0);
    user-select: none;
  }
  #dropEle {
    border: 1px solid #000;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 200px;
  }

JavaScript

const dom = {
    addListener: (target, eventType, callback) => {
      if (target.addEventListener) {
        target.addEventListener(eventType, callback, false)
        return {
          remove: () => {
            target.removeEventListener(eventType, callback, false)
          }
        }
      } else if (target.attachEvent) {
        target.attachEvent('on' + eventType, callback)
        return {
          remove: () => {
            target.detachEvent('on' + eventType, callback)
          }
        }
      }
    }
  }
  const dragEle = document.querySelector('#dragEle')
  const dropEle = document.querySelector('#dropEle')
  const img = new Image()
  img.src = './logo.svg'

  dom.addListener(dragEle, 'dragstart', (event) => {
    // 定义drag's data
    event.dataTransfer.setData('text/plain', event.target.id)
    // 定义drag image
    event.dataTransfer.setDragImage(img, 10, 10)
    // 定义drop Effect
    event.dataTransfer.dropEffect = 'copy'
  })

  dom.addListener(dropEle, 'dragover', (event) => {
    event.preventDefault()
  })
  dom.addListener(dropEle, 'drop', (event) => {
    const dragEleId = event.dataTransfer.getData('text/plain')
    event.target.appendChild(document.querySelector(`#${dragEleId}`))
  })