如何在reactjs中的div之间拖放？

Question

我尝试使用香草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>

Answer 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>