Question 74016 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Upload file/image flickering drag and drop in Reactjs

I’m trying to create a simple system to drag and drop some files.
I’ve did good, but sometime when you are with your cursor near .drop div margin and enter, it’s starts "flickering".

After you drag a image (.png) for example in the blue background everythings works (even when you leave it) …but… sometimes with your cursor on the margin of .drop div, something is happening.

How can I fix that?

Code: https://codesandbox.io/s/dreamy-field-empq1r

Tags:

2

Answers


  1. 0

    Make these changes in css

    .drop {
  /* margin: 30px; */
  height: calc(100% - 60px);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.drop::before {
  content: "";
  position: absolute;
  inset: 30px;
  outline: 3px dotted grey;
}
    Login or Signup to reply.
  2. 0

    When you are dragging on the .chatMessage and out of the .drop element, you don’t have any issue but when you are going on the .drop element it’s another children element and has itself events.

    So you shouldn’t have any issues if you prevent events from the children’s elements.

    Solution

    Add this CSS code to your CSS file:

    .dropContainer * {
  pointer-events: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search