在 Reactjs 中拖放答案

【问题标题】：Drag and Drop in Reactjs在 Reactjs 中拖放
【发布时间】：2020-03-03 04:42:32
【问题描述】：

我正在进行 react 中的拖放操作。我能够成功地将组件从一个分区拖到另一个分区。但是，在从父分区拖动组件时，组件在父分区中可见。当我放下组件到目标部门，然后组件将从父部门消失。我的要求是，让组件只出现一次，即当我开始拖动时，它应该从父部门消失。我怎样才能做到这一点。下面是代码实现拖放。帮助将不胜感激。


dragStart(event) {
    var bg=document.getElementById("bg")
    bg.style.transform=null
    event.dataTransfer.setData("Text", event.target.id);
    }
    allowDrop(event) {
      event.preventDefault();
    }
    drop=(event)=> {
      event.preventDefault();
      var data = document.getElementById(event.dataTransfer.getData("Text"));
      event.target.appendChild(data);
      data.style.position="fixed";
      data.style.left = (event.clientX - data.clientWidth / 2) + "px";
      data.style.top = ( event.clientY- data.clientHeight / 2) + "px";
      console.log(event.target.getBoundingClientRect())
      console.log(event)

    }

【问题讨论】：

标签： css reactjs drag-and-drop draggable

【解决方案1】：

是的，这是可能的

参考以下代码

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

【讨论】：

提示：不要发布仅链接的答案。而是从此处复制目标端的基本部分，以避免在链接目标消失时使答案无效。
好的@MikeLischke，感谢您的宝贵反馈。