获取鼠标下的第二个元素，它不是第一个元素的父元素

我正在制作一个HTML5类似于 Trello的卡片拖放板。

我正在将列表附加到列表插槽/容器。

当我onMouseDown在列表中时，列表会随着鼠标移动。我需要能够检查鼠标指针下方的列表容器onMouseUp。这将允许我将列表附加到该容器。

目前我在尝试获取鼠标下的容器元素时遇到了困难。由于当时列表直接位于鼠标下方，因此我正在尝试查看鼠标下方的内容。

我无法获得我正在拖动的列表的父元素，因为父元素将始终返回原始列表父元素，因为我正在拖动列表并更改不会更改父元素的 Top 和 Left 属性。

所以基本上我需要查看鼠标下方的内容，不包括我正在拖动的列表。当我拖过列表插槽 1 时，我需要获取该元素，而当我拖过列表插槽 2 时，我需要获取该元素。

import React, { useEffect, useState } from "react";





export default function Main() {
  const [mousedown, setmousedown] = useState(0);
  const [etop, setetop] = useState(0)
  const [epostiontype, setepostiontype] = useState("relative")
  const [eleft, seteleft] = useState(0)

  ///////////////////
  let offsetX, offsetY;
  const move = e => {
    const el = e.target;
    el.style.left = `${e.pageX - offsetX}px`;
    el.style.top = `${e.pageY - offsetY}px`;
  };

  const add = e => {
    const el = e.target;
    offsetX = e.clientX - el.getBoundingClientRect().left;
    offsetY = e.clientY - el.getBoundingClientRect().top;
    el.addEventListener('mousemove', move);
  };

  const remove = e => {
    const el = e.target;
    el.removeEventListener('mousemove', move);
  };
  ///////////////////////
  const [list_states, setlist_states] = useState(
    [
      {
        name: "This is list 1",
        id: 1,
        top: 0,
        left: 0
      }
    ]
  );
  var getParents = function (elem) {

    // Set up a parent array
    var parents = [];

    // Push each parent element to the array
    for (; elem && elem !== document; elem = elem.parentNode) {
      parents.push(elem);
    }
    // Return our parent array
    return parents;

  };

  function mouse_moving_in_container(props) {
     // gets mouse position
     var x = props.pageX, y = props.pageY

     var element = document.elementFromPoint(x, y);

     console.log(element)

    // checks if mouse is down over a list. The mousedown var is the element id of the lsit that is being clicked. If no list is being clicked then the var is 0
    if (mousedown != 0) {
      var difference = props.pageY - document.getElementById("List_1").offsetTop
      var mouse_top = props.pageY - 10
      var mouse_left = props.pageX - 10
      setepostiontype("absolute")
      setetop(mouse_top)
      seteleft(mouse_left)


     
      // gets the element under the mouse
      var elementMouseIsOver = document.elementFromPoint(x, y)
      //returns array of all parents for the element above
      var element_parents = getParents(elementMouseIsOver)

      element_parents.forEach(element => {
      //  console.log(element.id)
     
        if (element.id.includes("Container")){
         // console.log("TThere is a <List>  container under mouse. ID: ")

        }
        else {
          //console.log("There is NO <List>  container under mouse.")
        }
        
      });
    }





  }



  return (
    <div className={"testing"}>
      <Container >
        <Slot>
          <List></List>
        </Slot>

        <Slot>

        </Slot>
      </Container>


    </div>


  );

  function change_mouse_status(event) {
    // console.log("change status",event)
    setmousedown(event)

  }




  function List() {
    return (
      <div
      
       id="List_1" className="width" style={{
        height: "100px",
        width: "180px",
        background: "red",


        position: `${epostiontype}`,

        // "relative",
        top: `${etop}`,
        left: `${eleft}`

      }}

        onMouseUp={() => change_mouse_status(0)}
        onMouseDown={() => change_mouse_status(1)}

      >
        this is a list
      </div>
    );
  }

  function Slot(props) {
    return (
      <div id="slot_1" style={{ display: "inline-flex", padding: "10px", margin: "10px", backgroundColor: "#e8e8ff", height: "200px", width: "200px" }}>
        {props.children}

      </div>
    );
  }

  function Container(props) {
    return (
      <div id="Container_1" onMouseMove={mouse_moving_in_container}
      name='testname'
        style={{
          display: "inline-flex",
          backgroundColor: "#94e49d38",
          height: "400px",
          width: "100vw-10px"
        }}
      >


        {props.children}

      </div>
    );
  }
}

这就是我迄今为止所拥有的。

任何助理将不胜感激。