Margin or another div above component with DragSelection causes coordinates to be off

[jschneider33]

When either a margin or div is above the component containing the DragSelection component, the top coordinate of the selection box is off by that height.

To reproduce, just add a margin-top: 50px to the container class in the codesandbox and drag, the box top is off by 50px.

In my code, I had a title that was 60px tall and the component that I had the DragSelection component below it. Whenever I tried dragging, the top was 60px higher than where my cursor was.

[tomaszczura]

I was able to reproduce it with adding margin-top, but when I added <div style={{ height: 60 }}>Title</div> above <DragSelection />, cursor was at the correct place. Could you create a sandbox with example of your code?

[jschneider33]

Sorry, my description was fully accurate for that portion. To reproduce I added a header above the draggable container as seen in this codesandbox. So something like this:

<div>
  <div class="header">
     <h1>HEADER</h1>
   </div>
   <div id='draggable-area'>
     <DragSelection />
     <div class='elements'>
        {Array.map....}
      </div>
    </div>
</dv>

[tomaszczura]

Thanks! We will look into this. In the meantime, you can move <DragSelection/> below <div id='draggable-area'>, so it will work as expected:

<div>
  <div class="header">
      ....
   </div>
   <div id='draggable-area'>
     ....
    </div>
    <DragSelection />
</dv>

[dsod]

Hi, we are experiencing the same issue, and the workaround is not working for us due to having a more complex DOM structure.

After some research it seems like there is a fork of your package with a potential fix: https://github.com/AirLabsTeam/react-drag-to-select/commit/44e87764c1581c6ac896e243ae368f800e04c0b7 Just adding it here for context.

[SimonPlace]

UP