Home > Mobile >  How to drag and drop in between divs in reactjs?
How to drag and drop in between divs in reactjs?

Time:12-18

I tried implementing drag and drop functionality in reactjs using vanilla HTML/js APIs. I almost completed it, but I cannot drop it between the existing divs. I want to add the functionality of dragging and dropping in both the divs (i.e., I should be able to drag any of the divs in the first column and drop anywhere in the second column and vice versa). So far, I am able to drag and drop only at the last index, not in between

Here is what I have tried so far. Please include the code. I am not that strong to follow if you are suggesting something

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

CodePudding user response:

appendChild always adds the item to the end of the target div. You can do a simple calculation to identify the position to drop using children's positions (child.getBoundingClientRect().bottom) and mouse drop position (e.clientY).

Change the drop handler as below

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>

  • Related