JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d1">
    <input type="text" id="t1">
    <input type="button" id="b1" value="done" onclick="done()">
  </div>
  <div id="d2">

</div>

CSS

body {
  margin: 0;
  padding: 0;
}

#d1 {
  padding: 5px;
  top: 0;
  width: 100%;
}

#t1 {
  width: 85%;
}

#b1 {
  width: 10%;
}

.nodes {
  position: fixed;
  background-color: palegreen;
}

JavaScript

let j = [{
  id: 0,
  PosX: 100,
  PosY: 100,
  title: "葉っぱ"
}]

const d2 = document.querySelector("#d2")

function done() {
  console.log("done")
}

j.forEach((v, i, a) => {
  const l = document.createElement('label')
  l.innerHTML = v.title;
  l.style.left = v.PosX + 'px';
  l.style.top = v.PosY + 'px';
  l.id = v.id
  l.draggable = true;
  l.classList.add("nodes")
  l.addEventListener("dragend", (event) => {
    event.target.style.left = event.clientX + 'px';
    event.target.style.top = event.clientY + 'px';
    j[event.target.id].left = event.clientX;
    j[event.target.id].top = event.clientY;
  })
  d2.appendChild(l)
})