Positioning of the dragged image

[frysch]

Hey!

I feel there's room for improvement when grabbing items. Now it always sticks element at 0,0 to the cursor in modern browsers. See gif:

Wouldn't it be smoother if the item stays at the grabbed position like this:

I'm happy to supply a PR with this, just wanted to throw the suggestion out here before to discuss possible solutions.

As i see it, there's two ways of solving it:

1. Add a action similar to determineForeignPositionAction where the user implements their own method to calculate where to position the item.

2. Add an argument to drag-sort-list which allows setting predetermined positions. Something like auto|top left|bottom left|center center| etc... Very CSS like values, where auto positions it where grabbed.

I'd prefer alternative 1, but that's probably because of laziness. Maybe there are better options than those two.

Suggestions? Thoughts?

[lolmaus]

Uhm, I believe you don't have control over the ghost image. You can only enable/disable it.

IFAIK, in order to control the positioning, you'd have to actually move an dragged component after the cursor via top/left or transform: translate.

Will be happy if you prove me wrong.

PS How did you make the second animation? Another browser?

[lolmaus]

PS I actually like the ghost image being anchored to the cursor by the top-left corner. This way, it does not obscure the list.

[frysch]

The second gif was made by removing this little Firefox hack from drag-sort-item.js:

    // Required for Firefox. http://stackoverflow.com/a/32592759/901944
    if (event.dataTransfer) {
      if (event.dataTransfer.setData) event.dataTransfer.setData('text', 'anything')
      if (event.dataTransfer.setDragImage) event.dataTransfer.setDragImage(this.element, 0, 0)
    }

Another solution is to just narrow the check down to something like if (event.dataTransfer && event.dataTransfer.mozCursor), if it should just target FF.

I'll implement it in some way in the project i'm working on, just a matter of either monkey-patch/extend it or getting it inside your repo 😀

The behavior i'm looking for here is actually the default drag n' drop behavior. But i'm happy with it being optional in some way.

I think it's achievable by just fetching the mouse position from the event and use it relative to the element and do something like event.dataTransfer.setDragImage(this.element, relativeMousePosition.x, relativeMousePosition.y)

[lolmaus]

Ah, so event.dataTransfer.setDragImage is public API for positioning the image? Nice!

Looks like it's fully supported by everyone except IE.

What happens in Firefox when you comment out only one line: the one with event.dataTransfer.setDragImage()?

I'm in favor of this solution:

@frysch: Add an argument to drag-sort-list which allows setting predetermined positions. Something like auto|top left|bottom left|center center| etc... Very CSS like values, where auto positions it where grabbed.

I'd make it opt-in, and by default it should be normal browser behavior.

[lolmaus]

#45 is released as 3.0.0, it should cover this case.

I wonder if this should be the default, though?

[frysch]

#45 is released as 3.0.0, it should cover this case.

I wonder if this should be the default, though?

Nice! 👍 I haven't had time to do any PR's for this. (Also, yes, i'm a bit lazy as well.)

If you ask me i'd prefer this behaviour instead of the old one where the ghost image quickly jumps to the right.