如何在 reactjs 中的 div 之间拖放?
How to drag and drop in between divs in reactjs?
我尝试使用普通 HTML/js
API 在 reactjs
中实现拖放功能。我几乎完成了它,但我不能将它放在现有的 div
之间。我想在两个 div 中添加拖放功能(即,我应该能够将第一列中的任何 div
拖放到第二列中的任意位置,反之亦然)。到目前为止,我只能在最后 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>
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>
我尝试使用普通 HTML/js
API 在 reactjs
中实现拖放功能。我几乎完成了它,但我不能将它放在现有的 div
之间。我想在两个 div 中添加拖放功能(即,我应该能够将第一列中的任何 div
拖放到第二列中的任意位置,反之亦然)。到目前为止,我只能在最后 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>
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>