TableDnD
TableDnD copied to clipboard
animated dragging - dragged TR element actually follows the mouse
It's only 10 lines of code. Here's what I did:
- in
mousemove
it only moves the dragged element along with the mouse usingcss - transform
and it does not perform the actualmoveVertically
to move the element in the DOM. - `processMouseUp' is now where the actual DOM modification happens (I just moved your existing code there)
Tested in Chrome, Mozilla, Edge. Also, css-transform is supported in all major browsers including even IE11.
Performance should be ok, b/c transform is h/w accelerated (unlike css top/left
manipulations). Tested on my wife's slow laptop :)
Thanks @jitbit, can you let me know how this works on tablets? I've not got the time to test it myself. Also, does the page scrolling for long tables still work? :)
@brendon Yes, I kept the autoscroll code intact. It works, I tested it on long tables
Tablets: I tested on an iPhone/iOS 10, it works fine, but can't find a tablet to test with... Anyways, most tablets are WebKit anyway, so it should work.
Once again - it simply sets style="transform:translate(MOUSE_COORDINATES)"
and that's it. This makes the element float with the mouse cursor. The DOM-modification happens in MouseUp
Ah I see :) Is there some kind of visual indicator as to where the drop will affect (i.e. a bold line between the two rows of the table that the tr will drop into?)
Nope, not yet. It only does what I said it does :) sets the "style".
I suggest you try it in a browser and decide if its worth the merge :) If not - it's fine, I'll continue working on it anyway (including the drop indicator)
I think once it has a drop indicator we can merge it. That would mean that we're not removing a feature (currently as the tr is moved we get that indication purely because it's actually moved up or down the table.) Whether it's done by inserting a dummy row into the table, or just manipulating the border width (I'd favour the first since it's easier to style (and override)).
Please excuse my hesitant nature around this PR. I've only recently been appointed to the project as a maintainer :)
Got it :) No worries. I'll keep working and get back to you