admin管理员组

文章数量:1401650

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 ponents, 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 ...)?

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 ponents, 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 ...)?

  • javascript
  • reactjs
  • drag-and-drop
Share Improve this question edited Aug 12, 2022 at 13:25 Artyom Vancyan 5,3963 gold badges17 silver badges37 bronze badges asked Aug 9, 2022 at 6:52 MadpopMadpop 7254 gold badges29 silver badges63 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 3 +50

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 remending 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./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

  1. without plugin:

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>

  1. with plugin: use react-draggable

The field state should be stored and handled by the form (parent), not the field. We can pass a callback function to the field ponent 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 ponents in grid and it only allow dragging horizontal or vertical only.

本文标签：

版权声明：本文标题：javascript - How to implement horizontal and vertical drag and drop using react.js with or without using plugin? - Stack Overflo 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744268186a2598049.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。