Use pointer events to enable touch support

annaghi / dnd-list

Drag and Drop for sortable lists in Elm web apps with mouse support

https://annaghi.github.io/dnd-list/

BSD 3-Clause "New" or "Revised" License

103 stars 15 forks source link

Use pointer events to enable touch support #85

Open ceddlyburge opened 1 year ago

ceddlyburge commented 1 year ago

This works for the basic example, but still wants a bit of work / thought

ceddlyburge commented 1 year ago

Hi @annaghi , I think this is ready for review now.

All the examples can now be used with touch, and I went through them all to check that they all work.

There is now a create function, which is the same as it was previously. It only works with mouse, but doesn't require any ports so is easy to integrate.

There is also a createWithTouch function that works with pointer events and hence supports touch.

Some notes:

I haven't updated the readme yet, but we probably should. Maybe just with an example of using createWithTouch?
All the examples use createWithTouch, maybe we should add some that showcase using the existing create function (or just have some of the existing examples using touch and some not, Basic might make sense as one that doesn't use touch).
There are a small number of new code comments that you might want to look at. I would probably keep these in myself, but people have differing opinions about comments :)

hingew commented 11 months ago

Any update on this? <3

ceddlyburge commented 11 months ago

I haven't heard from Anna for a while, or seen her active on slack. I assume she is in the middle of something that is taking up all of her time. This works though, so you could copy / paste the code in to your app as a temporary solution?

ceddlyburge commented 6 months ago

Hi @annaghi, I've fixed that problem we saw. I think it was a race condition. Being as the pointer events are different, come in through ports and have the 'releasePointerCapture' complication, I can easily imagine that they come in a different order to the mouse events sometimes. Anyway, everything works now, and you can give it a look on my fork at:

https://ceddlyburge.github.io/dnd-list

annaghi commented 6 months ago

Hi Cedd, great work!

I will review it in pieces, the first request is to create a Port module similar to this PR: https://github.com/annaghi/dnd-list/pull/86/files

ceddlyburge commented 6 months ago

Hi Anna, the ports are already in this PR, but in Home.elm (instead of inPort.elm as in that PR you linked to), is this an important difference? They are both in the examples directory, so not available to users of the package.

annaghi commented 6 months ago

Thank you for incorporating the ports into the Home.elm module. However, to maintain a clear separation of concerns and keep the codebase organized, I would prefer having the ports in a dedicated module. Let's introduce a new module named Port.elm, similar to the structure of this PR https://github.com/annaghi/dnd-list/pull/86/ This approach will help keep Home.elm focused on its primary functionality, and Port.elm can handle all the ports.

ceddlyburge commented 6 months ago

Ok, this is done. Cheers, Cedd

annaghi commented 6 months ago

In the other PR I have added an example for no-touch: examples/src/Introduction/Basic_NoTouch.elm Can you please add it here too?

ceddlyburge commented 6 months ago

Ah yes, I remember you asked me to do this a long time ago, and I did! But its on the other branch where we were thinking about a different way to do the ports. I've pulled it in to this branch now.

ceddlyburge commented 6 months ago

Hi @annaghi, do you have any other comments? Thanks, Cedd