#help needed .gu-transit > transform: scale(0.2); need support to set mouse position

[danialumair]

this is great plugin, i am using this for long
i need little help if someone can do
i am develeoping mobile app using ng2-dragula
the issue is that i custom .gu-transit by adding transform: scale(0.2); to make drag item small , but the problem is that the transform start from pixle 0,0 of the parent item box and while draging there is gap between mouse and the mirrored item
sorry if i could not make u understand what i want
from the following snap , you can see there is gap between the gragged item(right side) and the mouse pointer

[DavidDNA]

Did you try to play with the transform-origin attribute?

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

[danialumair]

Yes I tried , but not working

[DavidDNA]

In your case, I'd put a handle on the elements of your list and offset the item using transform-origin so that it always sticks with your cursor / finger.

The other solution would be to adapt the source code of the drag so it takes scale into account and offsets it correctly according to your finger position but it's probably out of the scope of this wrapper and more an issue related to Dragula.

bevacqua/dragula#110

[danialumair]

Dear how can we remove the offset so it would stick to the mouse from bottom right corner

[danialumair]

I have seen.that offset had been added in ng2-dragula.umd
I have remove the offset in this file but it is not reflected , can anyone suggest who to work on this file

Even I usrr" npm link " also but still nothing happened as ny wish

I have added alert in the file also ng2-dragula.umd but still no alert happened , can anyone guide me how to modify so the change would be reflect
Thanks

[danialumair]

Any support here please

[cormacrelf]

If it’s a bug with Dragula, we can’t help you here. Remember, ng2-dragula is just glue for dragula, so probably don’t bother modifying this library, go for the source. Plus, dragula is not being maintained as far as I know.

If you’re doing it yourself, remember to build the library you’re npm link-ing to each time it changes.

I did create a new library that has this feature. angular-skyhook, based on the famous react-dnd. It is not a drop in replacement at all, but I’m working on some example code in the Trello/dragula vein. You get full control over the in-flight item if you want it.

[cormacrelf]

(Also, the offset in your UMD bundle comes from including Dragula transitively (see here), because there is no offset code in this wrapper. There is an open issue and PR upstream that may solve your issue. bevacqua/dragula#285 -- I suspect it might relate to you if Dragula computes the size of your element after applying scale(0.2) to it.)

[cormacrelf]

Actually, you know what, have you tried applying the scale to .gu-mirror? The class names are confusing, but .gu-mirror is the one that follows your mouse around. It's duplicated from the .gu-transit, which if you applied scale to already, would cause a faulty offset calculation.

[cormacrelf]

Inactive.

[danialumair]

dears can i open the issue again i need this feature again and now must as i already struggle hard to perform this task