Find the second element beneath the mouse cursor that is not a direct ancestor of the first element

Question

Find the second element beneath the mouse cursor that is not a direct ancestor of the first element

I am currently developing a card drag-and-drop board using HTML5 inspired by Trello.

My focus right now is on connecting the lists to specific list slots/containers.

My challenge lies in determining which list container is positioned beneath the mouse pointer when the list is released (onMouseUp). This information is crucial for attaching the list to the correct container.

At present, I am struggling to identify the container element under the mouse cursor. The issue arises because the list is directly under the mouse when attempting to identify its surroundings.

Obtaining the parent element of the dragged list is problematic since the parent element remains constant while the list is dragged and its top and left attributes are modified.

In essence, I need to identify what lies under the mouse cursor, excluding the list being dragged. When the drag occurs over list slot 1, I need to capture that specific element; likewise, when moving over list slot 2, I need to detect that element.

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

// Rest of the JavaScript code here...

This is where my progress stands at the moment.

Any guidance or assistance would be greatly appreciated.

javascript html css reactjs

Answer 1

Answer №1

I managed to resolve the problem by adjusting the pointerevents slots to none while they are being dragged. Then, I set them back to default when not being dragged.

I also made modifications to the onMouseDown and onMouseUp event handler to the body of the page in order to continue detecting the event.

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

export default function Main() {
  // Functionality and state management code goes here

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

        <Slot
          slot_id="Slot_2">

        </Slot>
      </Container>
    </div>
  );
}

function List() {
  // Code for List component goes here
}

function Slot(props) {
  // Code for Slot component goes here
}

function Container(props) {
  // Code for Container component goes here
}

Answer 2

I managed to resolve the problem by adjusting the pointerevents slots to none while they are being dragged. Then, I set them back to default when not being dragged.

I also made modifications to the onMouseDown and onMouseUp event handler to the body of the page in order to continue detecting the event.

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

export default function Main() {
  // Functionality and state management code goes here

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

        <Slot
          slot_id="Slot_2">

        </Slot>
      </Container>
    </div>
  );
}

function List() {
  // Code for List component goes here
}

function Slot(props) {
  // Code for Slot component goes here
}

function Container(props) {
  // Code for Container component goes here
}

Find the second element beneath the mouse cursor that is not a direct ancestor of the first element

Answer №1

Similar questions

Fetching the second item within an object using JavaScript

How to Fix Owl Carousel Not Displaying in Bootstrap 5

Updating the CSS link href in ASP.NET using code behind

Tips for loading a webpage with optimal speed and efficiency

Extracting the call from REST API in JSON format

Error message: The method app.get() is invalid as it is not a

The process of rendering children elements in React

Enabling or disabling a button dynamically in Ionic based on a conditional statement

Creating a customized greeting message using discord.js

I am encountering compilation errors while trying to run a basic react-dnd list using typescript

What is the best way to show my results in a single line?

What could be the reason for parent props not updating in child components in VueJS?

"Encountering a hiccup in executing map.reduce

Invoke a JavaScript function within a PHP file

When utilizing ASP.NET Core Razor pages for file uploads and utilizing AJAX Post to send the file to an IFormFile handler, the request

Using a forward slash in the path for the href attribute in a CSS link within an ejs file

Web Security Vulnerability: Cross Site Scripting Detected

The text fields keep duplicating when the checkbox is unchecked

Error: Attempting to access property 'baseHref' of an undefined value is not possible

The basic node API request is not showing any information