score:0

Accepted answer

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 Query

More Query from same tag