I found a javascript hack to trigger mouse event for the first touch. http://stackoverflow.com/questions/8058699/drag-drop-on-mobile-devices-using-some-code-that-translates-event-code-included
It does what I need to do even though it would've been nice to do it directly in Elm. Le lundi 29 août 2016 18:32:12 UTC-6, Jonathan Duncan a écrit : > > Hi am trying to get my drag and drop user interface to work with touch > events. I have it working fine by subscribing to the mouse events from > https://github.com/elm-lang/mouse > > I would like to do something similar with touch. I > tried knledg/touch-events but it works with attributes not with > subscriptions. > > I've tried copying the mouse.elm into my project and got it working. I am > prototyping to see if I could get it working with touch. I created three > new functions > > > touchmoves : (Position -> msg) -> Sub msg > touchmoves tagger = > subscription (MySub "touchmove" tagger) > > > touchdowns : (Position -> msg) -> Sub msg > touchdowns tagger = > subscription (MySub "touchstart" tagger) > > touchups : (Position -> msg) -> Sub msg > touchups tagger = > subscription (MySub "touchend" tagger) > > > > > but they are not coming in. I think I need to set an > e.preventDefault(); but I don't know how I would go about doing that. > > > In the Firefox and Edge browsers, the touch drag works. I guess they send > mouse events too when there are touch events. In Chrome the touch drag > doesn't work but it does drag fine with the mouse. > > > This example that was made for W3C Touch Events for IE10 and IE11 Mobile > (prior to WP 8.1 Update) works with touch in Chrome, it is in Javascript. > > http://webreflection.github.io/ie-touch/ > https://github.com/WebReflection/ie-touch > > Their javascript looks like this > <script> > this.onload = function () { > var > handler = { > handleEvent: function (e) { > this[e.type](e); > }, > touchstart: function (e) { > var div = e.currentTarget, > touch = e.touches[0]; > e.preventDefault(); > e.currentTarget.textContent = 'start'; > this.diffY = touch.pageY - parseFloat(div.style.top || 60); > this.diffX = touch.pageX - parseFloat(div.style.left || 60); > }, > touchmove: function (e) { > var div = e.currentTarget, > touch = e.touches[0]; > e.preventDefault(); > div.textContent = 'move'; > div.style.top = (touch.pageY - this.diffY) + 'px'; > div.style.left = (touch.pageX - this.diffX) + 'px'; > }, > touchend: function (e) { > e.preventDefault(); > e.currentTarget.textContent = 'end'; > }, > touchcancel: function (e) { > e.preventDefault(); > e.currentTarget.textContent = 'cancel'; > } > } > ; > Object.keys(handler).forEach(function (key) { > this.addEventListener(key, handler); > }, document.querySelector('div')); > }; > </script> > > > > I would like to do something similar in my elm app. > > Any ideas or workarounds? > > Thanks > > > -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
