Custom offset handler

[rohmann]

There are a few cases where I would like _offsetX and offsetY to be 0 rather than the calculated value. This way my element is guaranteed to be placed at the mouse coordinates.

Example 1: I have a larger element, and I'm styling gu-mirror to make it appear as just an icon as it's being dragged.

Example 2: I'm manually starting a drag event, and following up by dispatching a mousedown event to force the drag to begin (The mouse is already clicked down from a previous event). Having no offset will allow that element to jump to the mouse position.

[rohmann]

Renamed the issue. How about the ability to pass in a handler that can be used to calculate the offset?

[GermainBergeron]

I would need this too. I use Dragula inside of a modal and the offset doesn't account for this modal positioning

[rohmann]

@GermainBergeron I added a PR, but it's not passing :( I haven't had a chance to look into why, but I'm using the changes in a project currently

#328

[GermainBergeron]

I forked the repo and applied your changes. The test are green, I don't know what went wrong with travis. @rohmann I can do a new PR if you want, it literally a copy paste of your code

[rohmann]

Go for it!

[yellow1912]

I ran into the same issue. One way to get around it, is to simply turn off the css "transform" property of the modal so that the fixed position is not affected by the transformed context. Another way is to compensating for it via custom offset like you do, though I feel it a bit hacky for some reason.

[yellow1912]

After applying the patch by rohmann in his pull request, below is the code i used to adjust the offset of boostrap modal. This works for single level modal, i haven't tried with nested modal.

offset: function(offset, e, item) {
                    var modal = item.closest(".modal-dialog");

                    if (modal) {
                        var box = modal.getBoundingClientRect();

                        return {
                            x: offset.x + box.left, y: offset.y + box.top
                        };
                    }

                    return offset;
                }

The issue with bootstrap is that, as I explained earlier, it uses transform

In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

Hope this helps someone. I wasted several hours with this.

Note: closest method is not supported in some browsers such as IE, you may write your own js to traverse the tree or use jQuery or anything. The purpose of that line of code is to get the modal the element stays in to get its offset to adjust.

[ghost]

@bevacqua @rohmann any progress on this?

[diego-mathis]

This works fine: cf10a03