title: Get the second element under mouse that isn't a parent of the first element
body: <p>I am making a card drag and drop board in <code>HTML5</code> similar to Trello.</p>
  <p>I am working on attaching the lists to list slots/containers.</p>
  <p>When I am <code>onMouseDown</code> on a list, the list will move with the mouse. I need to be able to check what list container is below the mouse pointer when I <code>onMouseUp</code>. This will allow me to then attach the list to that container.</p>
  <p>currently I am having difficulty in trying to get the container element under the mouse. As the list is directly under the mouse at the time I am trying to see what's under the mouse.</p>
  <p>I cant get the parent element of the list I'm dragging as the parent will always return the original list parent, As I am dragging the list with changing the Top and Left attributes which doesn't change the parent element.</p>
  <p>So essentially I need to see what's under the mouse, excluding the list that I am dragging. When I'm dragging over list slot 1 I need to get that element, and when dragging over list slot 2 I need to get that element.</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  
  
  
  
  
  export default function Main() {
    const [mousedown, setmousedown] = useState(0);
    const [etop, setetop] = useState(0)
    const [epostiontype, setepostiontype] = useState(&quot;relative&quot;)
    const [eleft, seteleft] = useState(0)
  
    ///////////////////
    let offsetX, offsetY;
    const move = e =&gt; {
      const el = e.target;
      el.style.left = `${e.pageX - offsetX}px`;
      el.style.top = `${e.pageY - offsetY}px`;
    };
  
    const add = e =&gt; {
      const el = e.target;
      offsetX = e.clientX - el.getBoundingClientRect().left;
      offsetY = e.clientY - el.getBoundingClientRect().top;
      el.addEventListener('mousemove', move);
    };
  
    const remove = e =&gt; {
      const el = e.target;
      el.removeEventListener('mousemove', move);
    };
    ///////////////////////
    const [list_states, setlist_states] = useState(
      [
        {
          name: &quot;This is list 1&quot;,
          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 &amp;&amp; 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(&quot;List_1&quot;).offsetTop
        var mouse_top = props.pageY - 10
        var mouse_left = props.pageX - 10
        setepostiontype(&quot;absolute&quot;)
        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 =&gt; {
        //  console.log(element.id)
       
          if (element.id.includes(&quot;Container&quot;)){
           // console.log(&quot;TThere is a &lt;List&gt;  container under mouse. ID: &quot;)
  
          }
          else {
            //console.log(&quot;There is NO &lt;List&gt;  container under mouse.&quot;)
          }
          
        });
      }
  
  
  
  
  
    }
  
  
  
    return (
      &lt;div className={&quot;testing&quot;}&gt;
        &lt;Container &gt;
          &lt;Slot&gt;
            &lt;List&gt;&lt;/List&gt;
          &lt;/Slot&gt;
  
          &lt;Slot&gt;
  
          &lt;/Slot&gt;
        &lt;/Container&gt;
  
  
      &lt;/div&gt;
  
  
    );
  
    function change_mouse_status(event) {
      // console.log(&quot;change status&quot;,event)
      setmousedown(event)
  
    }
  
  
  
  
    function List() {
      return (
        &lt;div
        
         id=&quot;List_1&quot; className=&quot;width&quot; style={{
          height: &quot;100px&quot;,
          width: &quot;180px&quot;,
          background: &quot;red&quot;,
  
  
          position: `${epostiontype}`,
  
          // &quot;relative&quot;,
          top: `${etop}`,
          left: `${eleft}`
  
        }}
  
          onMouseUp={() =&gt; change_mouse_status(0)}
          onMouseDown={() =&gt; change_mouse_status(1)}
  
        &gt;
          this is a list
        &lt;/div&gt;
      );
    }
  
    function Slot(props) {
      return (
        &lt;div id=&quot;slot_1&quot; style={{ display: &quot;inline-flex&quot;, padding: &quot;10px&quot;, margin: &quot;10px&quot;, backgroundColor: &quot;#e8e8ff&quot;, height: &quot;200px&quot;, width: &quot;200px&quot; }}&gt;
          {props.children}
  
        &lt;/div&gt;
      );
    }
  
    function Container(props) {
      return (
        &lt;div id=&quot;Container_1&quot; onMouseMove={mouse_moving_in_container}
        name='testname'
          style={{
            display: &quot;inline-flex&quot;,
            backgroundColor: &quot;#94e49d38&quot;,
            height: &quot;400px&quot;,
            width: &quot;100vw-10px&quot;
          }}
        &gt;
  
  
          {props.children}
  
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>That is what I have so far.</p>
  <p>Any assistant would be appreciated.</p>