关键词：
【中文标题】如何在reactjs中的div之间拖放？【英文标题】：How to drag and drop in between divs in reactjs? 【发布时间】：2022-01-20 23:16:15 【问题描述】：我尝试使用香草HTML/js API 在reactjs 中实现拖放功能。我几乎完成了它，但我不能将它放在现有的divs 之间。我想在两个 div 中添加拖放功能（即，我应该能够拖动第一列中的任何 divs 并拖放到第二列中的任何位置，反之亦然）。到目前为止，我只能在最后一个index 拖放，而不是介于两者之间
这是我到目前为止所尝试的。请附上代码。如果您提出建议，我不会那么强烈地追随
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const App = () =>
const drop = (e) =>
e.preventDefault();
const div_id = e.dataTransfer.getData("div_id");
const block = document.getElementById(div_id);
e.target.appendChild(block);
;
const dragOver1 = (e) =>
e.preventDefault();
;
const dragStart = (e) =>
const target = e.target;
e.dataTransfer.setData("div_id", target.id);
;
const dragOver = (e) =>
e.stopPropagation();
;
return (
<div
style=
display: "flex",
justifyContent: "space-between",
padding: "50px",
>
<div
onDrop=drop
onDragOver=dragOver1
id="board-1"
style=
border: "1px solid #222",
padding: 20,
>
<div
id="firstfirst"
draggable
onDragStart=dragStart
onDragOver=dragOver
>
<div>
<h1>First Column First Row</h1>
</div>
</div>
<div
id="firstsecond"
draggable
onDragStart=dragStart
onDragOver=dragOver
>
<div>
<h1>First Column Second Row</h1>
</div>
</div>
Array.from(Array(2)).map((_, index) =>
return (
<div
key=index
id=`first$index`
draggable
onDragStart=dragStart
onDragOver=dragOver
>
<h1>First Column Row index</h1>
</div>
);
)
</div>
<div
id="board-2"
onDrop=drop
onDragOver=dragOver1
style=
border: "1px solid #222",
padding: 20,
>
<div
id="secondfirst"
draggable
onDragStart=dragStart
onDragOver=dragOver
>
<h1>Second Column First Row</h1>
</div>
<div
id="secondsecond"
draggable
onDragStart=dragStart
onDragOver=dragOver
>
<h1>Second Column Second Row</h1>
</div>
Array.from(Array(2)).map((c, index) =>
return (
<div
key=index
id=`second$index`
draggable
onDragStart=dragStart
onDragOver=dragOver
>
<h1> Second Column Row index </h1>
</div>
);
)
</div>
</div>
);
;
ReactDOM.render(<App />, document.getElementById("app"));
</script>【问题讨论】：
直接修改 DOM 可能会干扰 React 自己对 DOM 的管理。 dnd 最好使用一些特定于 React 的包。 @tromgy 有什么例子吗？而且我看到它已经正常工作了。只是顺序不对 这可能正是问题所在。一方面你让 React 使用Array.map 管理<div>s 的列表，另一方面你直接通过appendChild 修改DOM。
【参考方案1】：
appendChild 总是将项目添加到目标 div 的末尾。您可以使用孩子的位置 (child.getBoundingClientRect().bottom) 和鼠标放置位置 (e.clientY) 进行简单的计算来确定要放置的位置。
如下更改drop 处理程序
const drop = e =>
e.preventDefault();
const div_id = e.dataTransfer.getData("div_id");
const block = document.getElementById(div_id);
// get the child div index where to drop
let dropIndex = Array.from(e.target.children).findIndex(
// find the first child index where
// a child bottom (vertical viewport height to the bottom of child div)
// is greater than mouse Y position
child => child.getBoundingClientRect().bottom > e.clientY
);
if (dropIndex === -1)
// drop at the end
e.target.appendChild(block);
else
// drop at start or in between
e.target.insertBefore(block, e.target.children[dropIndex]);
;
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const App = () =>
const drop = (e) =>
e.preventDefault();
const div_id = e.dataTransfer.getData("div_id");
const block = document.getElementById(div_id);
let dropIndex = Array.from(e.target.children).findIndex(
(child) => child.getBoundingClientRect().bottom > e.clientY
);
if (dropIndex === -1)
e.target.appendChild(block);
else
e.target.insertBefore(block, e.target.children[dropIndex]);
;
const dragOver1 = (e) =>
e.preventDefault();
;
const dragStart = (e) =>
const target = e.target;
e.dataTransfer.setData("div_id", target.id);
;
const dragOver = (e) =>
e.stopPropagation();
;
return (
<div
style=
display: "flex",
justifyContent: "space-between",
padding: "50px",
>
<div
onDrop=drop
onDragOver=dragOver1
id="board-1"
style=
border: "1px solid #222",
padding: 20,
>
<div
id="firstfirst"
draggable
onDragStart=dragStart
onDragOver=dragOver
>
<div>
<h1>First Column First Row</h1>
</div>
</div>
<div
id="firstsecond"
draggable
onDragStart=dragStart
onDragOver=dragOver
>
<div>
<h1>First Column Second Row</h1>
</div>
</div>
Array.from(Array(2)).map((_, index) =>
return (
<div
key=index
id=`first$index`
draggable
onDragStart=dragStart
onDragOver=dragOver
>
<h1>First Column Row index</h1>
</div>
);
)
</div>
<div
id="board-2"
onDrop=drop
onDragOver=dragOver1
style=
border: "1px solid #222",
padding: 20,
>
<div
id="secondfirst"
draggable
onDragStart=dragStart
onDragOver=dragOver
>
<h1>Second Column First Row</h1>
</div>
<div
id="secondsecond"
draggable
onDragStart=dragStart
onDragOver=dragOver
>
<h1>Second Column Second Row</h1>
</div>
Array.from(Array(2)).map((c, index) =>
return (
<div
key=index
id=`second$index`
draggable
onDragStart=dragStart
onDragOver=dragOver
>
<h1> Second Column Row index </h1>
</div>
);
)
</div>
</div>
);
;
ReactDOM.render(<App />, document.getElementById("app"));
</script>【讨论】：
@Grand Whiz，看看这个！！如何使用 jQuery 进行拖放以在两个或多个 div 之间移动数据，然后触发对 db 的更新？
】如何使用jQuery进行拖放以在两个或多个div之间移动数据，然后触发对db的更新？【英文标题】：HowdoIdoadraganddropusingjQuerytomovedatabetweentwoormoredivsandthentriggeranupdatetothedbonthedrop?【发布时间】：2021-08-2121:24:27【问题描述】：如何使用... 查看详情
ReactJS 如何在 React 中的页面之间切换？
】ReactJS如何在React中的页面之间切换？【英文标题】：ReactJSHowdoyouswitchbetweenpagesinReact?【发布时间】：2018-09-1322:37:00【问题描述】：所以来自Angular/AngularJS背景，你有状态，每个状态都是一个单独的页面。例如。在社交网络中，... 查看详情
如何在 ReactJS-输出 [object Object] 中的功能组件之间传递值？
】如何在ReactJS-输出[objectObject]中的功能组件之间传递值？【英文标题】：HowtopassvaluesbetweenfunctionalcomponentsinReactJS-output[objectObject]?【发布时间】：2021-07-1406:30:50【问题描述】：我最近学习了如何在位于不同.js文件中的功能组件中... 查看详情
reactjs - 如何隐藏一个div并将其替换为reactjs中的另一个div？
】reactjs-如何隐藏一个div并将其替换为reactjs中的另一个div？【英文标题】：Howtohideadivandreplaceitwithanotherdivinreactjs?【发布时间】：2018-08-2403:09:49【问题描述】：有2个div。div1和div2。最初，显示div1而隐藏div2。单击按钮时，必须隐藏... 查看详情
如何在我的 React 表中使用列和行的拖放功能 - ReactJS
】如何在我的React表中使用列和行的拖放功能-ReactJS【英文标题】：HowtousedraganddropfunctionalitybothcolumnsandrowsinmyReactTable-ReactJS【发布时间】：2019-05-1710:17:22【问题描述】：我在ReactTable中创建了一个表。我想在列和行上添加拖放功能... 查看详情
如何在 ReactJS 中的功能组件之间传递值 - 输出 [object Object]/undefined？
】如何在ReactJS中的功能组件之间传递值-输出[objectObject]/undefined？【英文标题】：HowtopassvaluesbetweenfunctionalcomponentsinReactJS-output[objectObject]/undefined?【发布时间】：2021-08-0210:22:36【问题描述】：我无法在同一个.js文件中的功能组件... 查看详情
如何在 ReactJS 中的 http://localhost:3000/ 和 TMDB api 之间启用 CORS？
】如何在ReactJS中的http://localhost:3000/和TMDBapi之间启用CORS？【英文标题】：HowtoenableCORSbetweenhttp://localhost:3000/andTMDBapiinReactJS?【发布时间】：2021-02-2106:31:32【问题描述】：我遇到了无法从TMDBAPI获取数据的错误。从源“http://localhost:3... 查看详情
在两个 UICollectionView 之间拖放
...ionView两个。一个CollectionView中的拖放是没有问题的，但是如何我可以将Cell从CollectionViewOne移到Collec 查看详情
如何使用javascript停止拖放中的div重叠
】如何使用javascript停止拖放中的div重叠【英文标题】：Howtostopoverlappingofdivsindraganddropusingjavascript【发布时间】：2016-11-1516:57:18【问题描述】：我正在制作一个页面，其中左侧有一些可拖动的div，右侧有4个框可以放置这些div，但... 查看详情
如何使用 jQuery 在 div 中多次拖放图像以及在 drop div 中拖放图像？
】如何使用jQuery在div中多次拖放图像以及在dropdiv中拖放图像？【英文标题】：HowanimagecanbedraggedanddroppedmultipletimeswithindivusingjQueryandalsoimagedroppedwithindroppeddiv?【发布时间】：2020-02-0415:06:05【问题描述】：我的html中有两个div。一个... 查看详情
ReactJS + React Router：如何使 div 居中？
】ReactJS+ReactRouter：如何使div居中？【英文标题】：ReactJS+ReactRouter:Howtocenterdiv?【发布时间】：2017-06-2619:37:40【问题描述】：我目前设置了一个ReactJS+ReactRouter项目，并且在Chrome开发工具中的元素显示：<body><divclass="wrapper">... 查看详情
IOS在滚动视图之间拖放
...从一个视图中拖动并放置在另一个滚动视图中的视图。我如何做到这一点。我知道 查看详情
在 WPF 中的网格中的单元格之间拖放自定义控件
】在WPF中的网格中的单元格之间拖放自定义控件【英文标题】：DragandDropcustomcontrolsbetweencellsinagridinWPF【发布时间】：2014-10-0614:14:27【问题描述】：我有一些自定义控件被动态添加到自定义网格中。这些控件可以跨越多个列和行... 查看详情
如何在两个组件之间使用Angular7（角度材料）拖放
】如何在两个组件之间使用Angular7（角度材料）拖放【英文标题】：HowtouseAngular7(angularmaterial)dragdropbetweentwocomponents【发布时间】：2019-04-2402:06:40【问题描述】：最近Angular在Angular材质中引入了拖放https://material.angular.io/cdk/drag-drop/o... 查看详情
为啥拖放 ReactJS 时光标图标没有改变？
】为啥拖放ReactJS时光标图标没有改变？【英文标题】：Whyisthecursoriconnotchangingondrag/dropReactJS?为什么拖放ReactJS时光标图标没有改变？【发布时间】：2022-01-1023:42:19【问题描述】：我正在尝试拖动子组件，它运行良好，但我无法更... 查看详情
通过删除目标组件的导航标签，在组件之间进行拖放列表传输(代码片段)
我试图找出如何将一个元素从一个列表中删除到<div>并让该项目更改列表。目标是能够将项目从一个列表中删除到侧栏导航中的标签上，并将项目切换到该目标页面上的列表。我试图在stackblitz上实现一个非常简单的概念证明... 查看详情
使用 reactjs 在组件之间传递数据
】使用reactjs在组件之间传递数据【英文标题】：Passingdatabetweencomponentsusingreactjs【发布时间】：2017-11-0702:26:39【问题描述】：我有一个像下面这样的div。<divclassName="horiz_center"onClick=this.textType.bind(this,\'text\')><imgsrc=StarIconclass... 查看详情
如何制作拖放jquery？
】如何制作拖放jquery？【英文标题】：howtomakedraganddropjquery?【发布时间】：2016-06-0220:54:34【问题描述】：我一直在想如何用jQuery进行拖放，因为使用javascript拖放很难，我更喜欢使用jQuery而不是javascript。我想要的是子div是可拖动... 查看详情