Prevent Scrolling While Dragging in Material-UI Grid

I'm currently developing an application that features multiple columns in a MUI Grid, enabling horizontal scrolling. This app serves as a task planner, and I aim to implement drag-and-drop functionality for tasks moving between the visible columns on the screen. To achieve this, I am utilizing the hello-pangea/dnd library for managing drag-and-drop operations, alongside Material UI's Grid component for column arrangement.

One issue I encountered is with automatic scrolling while dragging tasks within the Grid. I would like to disable this behavior during drag-and-drop interactions.

My attempted solution involved dynamically adjusting the CSS style of the Grid's overflow property based on the drag state - setting overflow-x to hidden when dragging, and keeping it as scroll otherwise. Despite my expectations, this approach failed to prevent scrolling within the Grid as demonstrated by the GIF below:

https://i.sstatic.net/9coIj.gif

(I recognize the need for UI improvements, which will be addressed in due time)

I conducted tests on both Google Chrome and Safari browsers. Additionally, I experimented with managing the Grid's sx using a state variable, but was met with unsuccessful results. Here is a snippet of my code demonstrating these efforts:

const View = (props) => {
    const [currentOverflow, setCurrentOverflow] = useState("scroll");

    // ...taskView definition...

    // props.dragging: boolean indicating dragging status passed from parent
    useEffect(() => {
        setCurrentOverflow(props.dragging ? "hidden" : "scroll");
    }, [props.dragging])

    return (
        <Grid
            id={taskViewGridId}
            className="taskview"
            sx={{
                overflow: currentOverflow
            }}
        >
            {taskView}
        </Grid>
    )
}

Previously, my attempt to control overflow via CSS mirrored the above method, with a callback in the useEffect resembling this:

var gridElt = document.getElementById(taskViewGridId);

if (props.dragging) {
    gridElt.classList.remove("enable-scroll");
    gridElt.classList.add("disable-scroll");
} else {
    gridElt.classList.remove("disable-scroll");
    gridElt.classList.add("enable-scroll");
}

Accompanying CSS classes were defined as follows:

.disable-scroll {
    overflow-x: hidden;
}

.enable-scroll {
    overflow-x: scroll;
}

If anyone can provide insight into how to resolve this issue and effectively disable scrolling within the MUI Grid based on drag-and-drop activity, your assistance would be greatly appreciated.

Thank you.

Answer №1

This issue has been resolved. The @hello-pangea/dnd library now includes the functionality to prevent automatic scrolling of the window during dragging, thanks to a new feature added in their most recent update.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Change the color of the menu icon based on the specified HTML class or attribute

I'm trying to create a fixed menu that changes color depending on the background of different sections. Currently, I am using a data-color attribute but I am struggling with removing and adding the class to #open-button. Adding the class works fine, ...

How to make a multiline TextInput automatically scroll to the bottom in a react native app

I am trying to create a TextInput component where the text is visible when the keyboard is on. Android usually does this by default, but for some reason, my multiline TextInput is scrolling down to the bottom of the text just like a single line input (with ...

The React page experiences flickering just before it redirects due to changes in the Redux value

When designing my login page, I utilize redux to connect state to props in order to verify the existence of the user state object. If the object is present, the page should automatically redirect to "/". To achieve this functionality, I have implemented a ...

Waiting for useEffect to complete before rendering in React

export function FileUpload({ file, url, onDelete, onUpload, }: FileUploadProps) { const [progress, setProgress] = useState(0); useEffect(() => { async function upload() { url = await uploadFile(file, setProgress); console.log ...

Steps to add a label below a text input field

Within a form, I have two text boxes and I would like to add labels underneath each of them for better clarification. To illustrate my idea, here is a simple diagram: (input1)<--space-->(input2) <label1><--space--><label2> Is ther ...

Mastering the art of effortlessly displaying icons in a slideshow

I'm interested in creating an automated slideshow of icons. You can view an example on the website linked below by scrolling down to the footer section. Do you have any recommendations for how I could achieve this? My project utilizes nextjs and tailw ...

Issue with TextField margin when using MUI makeStyles

Trying to customize the TextField component in my project by utilizing makeStyles object in MUI v5. The background color changes are working, but having trouble with adjusting margin and padding. Here is a snippet of my code: import React, { useState } fro ...

What is the best way to send multiple requests using Axios?

I am currently developing a registration form in React that includes various fields such as idStudent (primary key & auto increment), first name, last name, faculty, and prerequisites. To ensure validation, I am utilizing Formik and yup. Additionally, my ...

What are some ways to address alignment problems that occur with input fields when the file name is lengthy?

When using input type="file", the alignment is not proper when the file name is long with multiple words... https://i.stack.imgur.com/52Yh5.png I would like it so that when the file name is long, it displays like this: From - New_InkDrops_HD_ ...

The command 'yarn' is not found within the available internal or external commands, and is not recognized as an operable program or batch file

I recently installed yarn by running the command npm install yarn -g After installation, the status displayed was: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6dfc7d4c8e697889494889796">[email protected]</a ...

What is the best way to create a design effect that gives the appearance of the image within the Card Media popping out or hovering above the rest of the

I have a question about the Card component in material-ui. Is there a way to add an effect where the image inside the card pops out or zooms in when hovering over it with the mouse? import { makeStyles } from '@material-ui/core/styles'; import Ca ...

What is the best way to load the contents of an HTML file into a <div> element without it behaving as an object?

Currently, I am importing an HTML file into a <div> in this manner: function load_content() { document.getElementById('content').innerHTML = '<object type="text/html" width="100%" height="100%" data="./content.html"></obj ...

What is the best way to handle multiple tabs within a tab accordion using a combination of Bootstrap and HTML

I'm currently working with a vertical tab accordion in a bootstrap col-sm-6 layout. The issue I'm facing is that I can only display three tabs in my code. If I add more tabs, they end up on a new row and the layout looks messy. Is there a way to ...

What steps do I need to take to create a sitemap that includes dynamic routes?

Seeking advice on how to direct search engines to index my dynamic routes. One example is /post/:id, with :id representing the post's ID. Any tips on how to include this in a sitemap? ...

Bootstrap 5 NavBar Toggle hamburger Menu not displaying menu items

I attempted to create a navigation bar using the navbar instructions in Bootstrap 5. I included a Toggle hamburger Menu and linked it to the list that should be displayed. However, when I decrease the screen size, the Toggle feature does not function as ex ...

Modifying HTTP status while streaming content with renderToNodeStream

I am currently working on implementing streaming rendering in my project. Here is a snippet of what I am currently doing: // Example code snippet res.write(htmlHeader) const renderingStream = renderToNodeStream(<App />); renderingStream.pipe(res) ren ...

Styling Components with MUI and Harnessing the Power of TypeScript

I'm encountering an issue with the following code snippets import {Button,ButtonProps} from '@mui/material'; import { alpha, styled } from '@mui/material/styles'; import { Link as RouterLink } from 'react-router-dom'; co ...

How can I activate div elements by clicking on a specific div using Angular 2?

I have created a custom component with search dropdown functionality for selecting dates. <div class="search-dropdown calender-dropdown "> <div class="search-dropdown-tabs-wrp"> <ul class="search-dropdown-tabs"> <li& ...

Keep the submenu visible upon clicking the sign-in form / Adjust the background color when the parent li is selected

I am facing two issues with my navigation menu that has dropdown lists: When clicking on a parent li, its submenu is displayed, but it gets hidden when clicking on another parent li or anywhere else on the page. For the first li.parent which contains a ...

In Internet Explorer versions 7 and 8, a transparent overlay div enables click-through functionality

I am facing an issue with a div containing form elements and an invisible overlay mask. When using IE 7 and 8, the click goes through the overlay without background which is incorrect. To solve this problem, I added a background color to the overlay div w ...