我正在进行拖放操作。我能够成功地将组件从一个分区拖到另一分区。但是,当从父分区拖动组件时,该组件在父分区中可见。当我放下组件到目标分区,然后该组件将从父分区中消失。我的要求是,仅使该组件出现一次,即当我开始拖动时,它应从父分区中消失。如何实现这一点。下面是代码实现拖放。将不胜感激。
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)
}
是,有可能
请参阅下面的代码
<!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>