anseki / plain-draggable

The simple and high performance library to allow HTML/SVG element to be dragged.
https://anseki.github.io/plain-draggable/
MIT License
765 stars 96 forks source link

leftTop option doesn't seem to work #29

Closed bparticle closed 5 years ago

bparticle commented 5 years ago

I love the library and the documentation is great! I'm having an issue however with the leftTop option that doesn't seem to have an effect on the way the items are being moved. I want to use simple left and top coordinates from a dragged object in order to store and recall position of DOM elements from a json file, but regardless of the leftTop option it's using transform: translate css every time. Is this a known issue or am I missing something? Otherwise I would love to hear any other ways I could get coordinates from draggable elements for storage use!

NathanaelA commented 5 years ago

That seems strange; I also have been playing around with the library the last couple days and leftTop does work for me...

let draggable = new PlainDraggable(html, {leftTop: true});

One thing is occasionally in my browser I need to do a "Empty Cache and Reload" so that when it loads my JS; it uses the "changed" version...

bparticle commented 5 years ago

@NathanaelA It is definitly strange. All else works as expected and I'm using the option in the constructor like you do. It's not a cache issue because all other changes are picked up on immediately. Your message is bad news actually, because now it seems I'm doing something wrong and for the life of me I can't figure it out since all the rest of the functionality is so smooth. My hopes are now set on finding a different way of storing the coordinates I guess.

NathanaelA commented 5 years ago

@bparticle - Make sure it is leftTop in that specific case. I kept trying to do topLeft and that doesn't work.

anseki commented 5 years ago

Hi @bparticle, thank you for the comment. Could you show me an example using e.g. https://jsfiddle.net/ to reproduce that?

bparticle commented 5 years ago

Thank you @anseki for looking into it. This is a jsFiddle that reproduces the problem for me on Chrome https://jsfiddle.net/6sjkaydq/1/. Browser version and environment is Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36. I will test this on other browsers now to see if it persists (since it's working for @NathanaelA it must be some odd environment variable, unless I made a funny typo)

Screenshot_16

NathanaelA commented 5 years ago

@bparticle - I was using HTML, Your using SVG -- I have no idea if leftTop works properly with SVG. :grinning: Just a fyi; you can get the location by doing draggable.top and draggable.left

anseki commented 5 years ago

SVG doesn't support left and top regardless of PlainDraggable. You can use left/top to get/set the position.

bparticle commented 5 years ago

I see, that explains it. I should've specified it in my issue description. Maybe it's not a bad idea to add this detail to the leftTop option paragraph in the docs!

anseki commented 5 years ago

Thank you for your suggestion. I might update the document.

So, could you close this issue if it was solved?

bparticle commented 5 years ago

Oh yes sorry! Thanks again.