Same element with both Draggable and Click / Touch

[anandpdoshi]

I have a set of icons which can be dragged for sorting or clicked for going into the link. This works on desktop browsers, but on touch devices, only dragging works. Touch event does not go through.

This is the error that occurs on double tap:

Here's what the UI looks like:

You can try out the live demo here: http://staging5.erpnext.com/

[RubaXa]

Try dev-branch

[RubaXa]

@anandpdoshi ?

[anandpdoshi]

@RubaXa Thanks for getting back.
dev branch didn't work. I am getting the same error in the console as the 1st screenshot.

For now, I have disabled dragging on touchscreen devices using the code:

    if ('ontouchstart' in window) {
        return;
    }

[bustikiller]

Good afternoon,

This is also happening to me. I've got a div which should be dragged or clicked. However, the drag event is always fired but the click event is never fired. A fix would be so great ;)

Nice job!

[RubaXa]

@anandpdoshi Here is an example of work dev-branch, there is no error, the problem maybe due to use min-version (from dev can only be used Sortable.js).

[bustikiller]

Sorry, I forgot to mention that the main branch works fine in a web page, or in a Firefox OS simulator, but when I load the code in my real device, all touches are detected as drag, and no touch is detected as click.

;)

[anandpdoshi]

Okay. I will test this out on Monday. Thanks for getting back :)

Sent from my phone

On 13-Feb-2015, at 0:44, Lebedev Konstantin [email protected] wrote:

@anandpdoshi Here is an example of work dev-branch, there is no error, the problem maybe due to use min-version (from dev can only be used Sortable.js).

—
Reply to this email directly or view it on GitHub.

[nevf]

I'm having the same problem with Bootstrap Tabs where touch on a Tab doesn't select it. This happens on my Samsung Tablet S and in the Chrome Dev Tools with Device Mode set to a Tablet etc. The current download is the same as the Dev branch except for the Version number.

You also get the ghost image on touchstart which doesn't look good if a drag isn't being done. I would think this should only happen (_onDragStart() called) after a touchmove of some minimum specified distance and if touchend occurs without that touchmove, a click is fired.

I've been doing a bit more research and found that some libs like slip https://github.com/pornel/slip don't use HTML5 drag & drop code at all, which maybe worth considering for Sortable. Related articles & code include: http://code.makery.ch/blog/drag-and-drop-without-html5/ https://github.com/rkusa/touch-dnd HTH

[jaesga]

Any solution for this problem?

[anandpdoshi]

Using the sortable dev branch's Sortable.js also doesn't work.

[nevf]

For anyone interested I've stopped using Sortable.js and am using touch-dnd.js http://ma.rkusa.st/touch-dnd/ It works very nicely on both touch and non-touch devices and doesn't use HTML5 drag & drop. I've helped track down and resolve a few issues and the author has been very responsive.

[kirilgorbachov]

I found the solution. The problem it's that library use even touchstart, if you change it to touchmove everything will works fine.
_on(el, 'touchmove', this._onTapStart);
_off(el, 'touchmove', this._onTapStart);

[g5724467]

This bug is fixed by #441 However, it is still a pull request and should be merged.

[MichalRemis]

For reference, with newer versions click event on touch devices wasn't working again but I had to set fallbackTolerance on SorgableJS to make it work.