logo标签列表

如何使用React.js实现水平和垂直拖放（Drag and Drop）功能，是否需要使用插件？

javascriptreactjsdrag-and-drop
5

我正在尝试使用拖动功能对表单上的字段进行重新排序，我需要按照从上到下，从下到上，从左到右以及从右到左的顺序重新排列每个元素的位置。

我遇到的问题是我将字段分成了单独的组件，例如dropdown.jsx，radio.jsx等，但我无法将状态从子组件提升到父组件。此外，有没有办法水平和垂直应用拖动功能（任何插件或...）？

4个回答
3

当然，NPM上有许多拖放包，但是如果您想要自己实现，那么我将展示一个示例，演示了使用纯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>

这个例子允许我们将元素在垂直或水平方向上拖放到ddzones之一。如果您想限制用户只能沿一个方向移动元素，则建议使用react-sortable-hoc多功能包，它允许将元素仅向垂直或水平方向移动。此外，它有很好的文档并且易于使用。

0
0

你的问题范围很大。简而言之，有两个解决方案：

  • 在我的一个项目中，我使用了这个库，它真的很好。https://www.npmjs.com/package/react-draggable

  • 我不确定你的代码库。但我认为你没有使用React上下文来更新状态。上下文将能够正确地更新状态。

谢谢

0
没有插件： 

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>

使用插件：react-draggable。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接