I am trying a feature on a form for re-ordering the fields using drag using this, I have to re-order the fields' position(individual element) from top-bottom, bottom-top,left-right, and right-left.
The problem I am facing is I have divided fields into separate components, like dropdown.jsx , radio.jsx, and I'm unable to lift the state up from child to parent. Also, is there any way to apply drag feature horizontally and vertically (any plugin or ...)?
Of course, there are a bunch of drag and drop packages at NPM, but if you want to implement yours, then I will demonstrate an example that shows a sample implementation of the drag-drop feature with pure JavaScript.
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}body {
margin: 0;
display: flex;
background: #1e1e2d;
}
#ddzone1,
#ddzone2,
#ddzone3,
#ddzone4 {
width: 35px;
height: 35px;
margin: 10px;
padding: 10px;
border-radius: 6px;
border: 1px dashed #eee;
}<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div>
<div id="ddzone1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div draggable="true" ondragstart="drag(event)" id="element">
<svg aria-hidden="true" width="32" height="37"
viewBox="0 0 32 37">
<path d="M31 7H1V6c0-2.61 2.42-5 5-5h20c2.58 0 5 2.39 5 5v1Z" fill="#8FD8F7"></path>
<path d="M1 25v1c0 2.61 2.42 5 5 5h13v6l6-6h1c2.58 0 5-2.39 5-5v-1H1Z" fill="#155397"></path>
<path d="M1 17v6h30v-6H1Z" fill="#2D6DB5"></path>
<path d="M1 9v6h30V9H1Z" fill="#46A2D9"></path>
</svg>
</div>
</div>
<div id="ddzone2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div>
<div id="ddzone3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="ddzone4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
</body>
</html>The example allows us to drag the element either vertically or horizontally and drop one of ddzones. If you want to restrict users to moving the elements only in one direction, then I am recommending using react-sortable-hoc multifunctional package that allows moving elements either only vertically or only horizontally. Also, it is documented very well and easy to use.
Your question has a big scope. In short, there are 2 solutions,
In one of my project, I was using this library and it really good. https://www.npmjs.com/package/react-draggable
I am not sure about your codebase. But I think you are NOT using React context to update the state. The context will be able to update sate properly.
Thank you
const handleHorizontalDrag = (event) => {
event.target.style.left = event.x + "px";
};
const handleVerticalDrag = (event) => {
event.target.style.top = event.y + "px";
};
document.addEventListener("dragover", function (e) {
e.preventDefault();
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=1, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button
style="position: absolute; top: 20px; left: 0px"
id="draggable-button-1"
draggable="true"
ondragend="handleHorizontalDrag(event)"
>
Horizontal
</button>
<button
style="position: absolute; top: 60px; left: 0px"
id="draggable-button-2"
draggable="true"
ondragend="handleVerticalDrag(event)"
>
Verical
</button>
</body>
<script src="index.js"></script>
</html>The field state should be stored and handled by the form (parent), not the field. We can pass a callback function to the field component to update the value.
Please check the code in https://codesandbox.io/s/using-script-tag-in-react-via-cdn-and-hooks-forked-206lsi
There are field components in grid and it only allow dragging horizontal or vertical only.
