css - 在 Reactjs 中拖放
问题描述
我正在进行 react 中的拖放操作。我能够成功地将组件从一个部门拖到另一个部门。但是,在从父部门拖动组件时,该组件在父部门中可见。当我将组件拖放到目标部门然后组件将从父部门中消失。我的要求是,使组件只出现一次,即当我开始拖动时,它应该从父部门中消失。我该如何实现。下面是实现拖动的代码并删除 .Help 将不胜感激。
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>
推荐阅读
- angular - 尝试使用 ng-select 但出现错误
- php - 获取产品的所有类别
- plugins - 如何在 Keycloak 中显示身份提供者配置页面?
- python - 使用 Kuber Liveness Probes 让 Flask 应用程序保持活力
- android - 如何在 android 8.0 中使用自定义声音设置通知?
- ios - 如何获取在 RxSwift 中单击了哪个按钮
- javascript - Highcharts(JavaScript):如果满足条件,则更改列的颜色
- prestashop - prestashop后台登录问题
- python - Seaborn stripplot 删除情节
- mysql - 无论我输入什么,MySQL Shell 总是给出错误