TableDnD icon indicating copy to clipboard operation
TableDnD copied to clipboard

animated dragging - dragged TR element actually follows the mouse

Open jitbit opened this issue 7 years ago • 7 comments

It's only 10 lines of code. Here's what I did:

  • in mousemove it only moves the dragged element along with the mouse using css - transform and it does not perform the actual moveVertically 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 :)

jitbit avatar Sep 26 '17 19:09 jitbit

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 avatar Sep 27 '17 00:09 brendon

@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

jitbit avatar Sep 27 '17 09:09 jitbit

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?)

brendon avatar Sep 27 '17 19:09 brendon

Nope, not yet. It only does what I said it does :) sets the "style".

jitbit avatar Sep 27 '17 19:09 jitbit

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)

jitbit avatar Sep 27 '17 19:09 jitbit

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 :)

brendon avatar Sep 27 '17 19:09 brendon

Got it :) No worries. I'll keep working and get back to you

jitbit avatar Sep 27 '17 20:09 jitbit