Touch: You stop getting move events when the element you started the drag on is removed from the dom.

[sunesimonsen]

#26 added initial touch support, but there are still some limitations. You stop getting move events when the element you started the drag on is removed from the dom.

[stretch4x4]

I am not sure if it is related but I am seeing a similar issue in firefox, with or without touch..
When I begin to drag, it creates the overlay object but then at this point continuing to drag starts highlighting text on the page, I have to let go over the click before I can continue moving the overlay object..
Not entirely sure what the issue is at this stage..
Update: It seems the firefox issue was introduced in commit ec7a52a one of the changes between 2.1.0 and 2.1.1 is causing the issue. I assume an event is being blocked which is causing the drag to be interrupted leading to the selecting of content somehow..

[sunesimonsen]

Is that on a Windows machine? Does it support touch input?

[stretch4x4]

Tried it on two machines, both windows 7 one of which has a 22" capacitive touch screen and a mouse, the other mouse only. In firefox seeing it whether I use the touchscreen on the mouse.

[sunesimonsen]

Thanks, I don't really have any hybrid machines to test with. Our focus is like this:

• Desktop computers with no touch support
• Touch devices with no mouse
• Desktop computers with touch support and mouse

Right now we only use knockout-dragdrop for the first case, so I don't have a lot of resources to debug the later two. But as long as the existing functionality doesn't break, I'm open to pull requests.

[stretch4x4]

I will see if I can have another look tomorrow.. Not sure what it is about our setup but in firefox it is broken both in case 1 and case 3 from the point of the commit mentioned above.. The demo still works on those machines but we must have something else causing an issue.. It did work fine with an earlier version of the library though.

[stretch4x4]

Ok I have done some more testing today and come up with some interesting results..
The firefox issues I have been having were caused by the following line going missing:

knockout-dragdrop/lib/knockout.dragdrop.js

Line 468 in f641258

downEvent.preventDefault();

Adding it back in at https://github.com/One-com/knockout-dragdrop/blob/master/lib/knockout.dragdrop.js#L511 solved them.
I am not entirely sure what other consequences this will have but it solved the issues I had with firefox creating the overlay object and then freezing / selecting things until you released the click/touch

The other interesting thing I have found, chrome obeys the touch timeout and produces the overlay object at the timeout no movement required and you are good to drag. Firefox does not obey the touch timeout however and never produces the overlay. However firefox will obey the distance requirement when using touch.. So if you drag the item at right angles to the scroll bar more than the minimum distance you get the overlay and you are ready to drag it where you like... However if you drag parallel to the scroll bar then you obviously scroll regardless of the timeout..

I hope that description makes sense.. I am not quite sure why chrome and firefox are behaving differently though.. Happy to submit a pull request for that missing line though to make firefox at least partially work.

Cheers

[sunesimonsen]

Thanks for digging into this, I still have a hard time reproducing the selection bug you are mentioning. The line was removed to make use the DOM focus still works, we really need that. But maybe we can prevent default and focus the element manually. It would be nice to be able to reproduce the bug before trying to fix it, so could you write down the entire setup you get the error on. Windows version, touch/no touch, browser version, ...

[stretch4x4]

No worries, I will collect all the specs tomorrow.
If I can find a few minutes I will see if I can build a sample that causes the issue although I am not sure exactly what is special about our usage that causes the issue, so I won't promise too much there.

[stretch4x4]

Ok so both machines are windows 7 64 bit
Firefox has been tested on a few versions: 33.1.1, 34, 38.0.5
My main machine is not touch it is just a regular desktop and the issue occurs using the mouse,
The other machine has a HP Compaq L2206tm Touch screen monitor and also has the issue whether using the touch screen or mouse.
Hope that helps

[sunesimonsen]

Thanks that helps.
Is that behavior reproducible on the example page?

[stretch4x4]

Sadly no :(
I wonder if it is because we have an svg inside our draggable div?
I tried to make a jsfiddle as an example but our code is a bit too complicated to easily create an example from and I haven't had time since :(

[sunesimonsen]

I'm trying to reintroduce the preventDefault

On Fri, Jun 19, 2015 at 8:57 AM, stretch4x4 notifications@github.com
wrote:

Sadly no :(
I wonder if it is because we have an svg inside our draggable div?
I tried to make a jsfiddle as an example but our code is a bit too
complicated to easily create an example from and I haven't had time since :(

—
Reply to this email directly or view it on GitHub
#27 (comment)
.

[sunesimonsen]

Mhh that breaks touch scrolling :-S It would be really nice if you could produce an example where it fails, otherwise it is pretty hard for me to help.

[stretch4x4]

No worries I will have another look at our code Monday and attempt to build an example, thanks for taking a look.

Sent from my Windows Phone

---

From: Sune Simonsenmailto:notifications@github.com
Sent: ‎19/‎06/‎2015 5:25 PM
To: One-com/knockout-dragdropmailto:knockout-dragdrop@noreply.github.com
Cc: stretch4x4mailto:desert-cruiser@hotmail.com
Subject: Re: [knockout-dragdrop] Touch: You stop getting move events when the element you started the drag on is removed from the dom. (#27)

Mhh that breaks touch scrolling :-S It would be really nice if you could produce an example where it fails, otherwise it is pretty hard for me to help.

---

Reply to this email directly or view it on GitHub:
#27 (comment)

[stretch4x4]

I haven't been able to break down our usage into an example yet but will try to find time to come back to this issue.