Position Draggable Based on Click Position

[mwood23]

Bug or feature request?

Feature request

Feature Request

I'm building out a document builder feature for an app, and I'm having problems with dragging between two lists that have different widths. I've looked at all of the issues and tried what you said on #614. The problem is that if you change the width you need to be able to change the position of the component to be based on where the user clicks. I also saw your comment on #517 and didn't find an issue filed capturing this behavior.

My goal would be having the ability to drag blocks to the snippets column and also being able to rearrange the blocks. I'm open to any other means of making this happen and can potentially put in a PR if you think it's within the scope of react-beautiful-dnd.

What version of React are you using?

16.4.2

What version of react-beautiful-dnd are you running?

10.0.1

Demo

Without a custom dragging component:

It's weird dragging around a big component and since things are based off the center of the element it's really hard to add the block to the snippets column.

Defining a custom width and height + custom component:

This is the suggestion I saw in #614. The problem is that the position is still calculated based off of the original width, not where you clicked. It also messes up the auto scrolling.

[alexreardon]

It sounds like you are trying to change the size of something during a drag.

No dimension changes during a drag

react-beautiful-dnd does not support the changing of the size of any Draggable or Droppable after a drag has started. We build a virtual model of every Draggable and Droppable when a drag starts. We do not recollect these during a drag. So if you change the size of something: the user will see the updated size, but our virtual model will remain unchanged.

[alexreardon]

We will explore the underlying issue of mixed sized draggables here: #930

[gabrielenosso]

I have a similar problem.

Would it be possible to specify the component for the drag as a Prop of ?

<Draggable draggingComponent={

hello

}/>

In this way, the library could still create its virtual model.

[hendrickcastro]

I have a similar problem too.