JSFiddle - React, Tailwind, and code Playground

HTML

<img src="https://i.imgur.com/o8ws13G.png" alt="Данный элемент является перетаскиваемым" id="p1" draggable="true">

<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</p>

CSS

[draggable] {
  outline: dashed 1px green;
}

#target {
  border: dashed 3px gray;
}

JavaScript

function dragstart_handler(ev) {
  //  Добавить id целевого элемента в объект передачи данных
  ev.dataTransfer.setData("image/png", ev.target.id);

  // Создайте изображение, чтобы использовать как изображение перетаскивания
  // Примечание: замените "example.gif" на URL-адрес реального изоражения,
  // иначе оно не будет создано и будет использоваться изображение по умолчанию
  let img = new Image();
  img.src = 'https://i.imgur.com/o8ws13G.png';
  ev.dataTransfer.setDragImage(img, 10, 10);    
}

const element = document.getElementById("p1");
// Добавить обработчик события `dragstart`
element.addEventListener("dragstart", dragstart_handler);

function dragover_handler(ev) {
  ev.preventDefault();
  ev.dataTransfer.dropEffect = "move";
}
function drop_handler(ev) {
  ev.preventDefault();
  // Получить id цели и добавить перемещённый элемент в его DOM
  const data = ev.dataTransfer.getData("image/png");
  ev.target.appendChild(document.getElementById(data));
}