Bug 204271 – UIEvents Event Detection Gives False Positives for Drag events

• Status: NEW
• Component: UI Events

[[e-mail]]

Mozilla/5.0 (iPhone; CPU iPhone OS 12_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Mobile/15E148 Safari/604.1


https://www.w3.org/TR/uievents/#conf-interactive-ua

"A conforming browser MUST support scripting, declarative interactivity, or some other means of detecting and dispatching events in the manner described by this specification, and MUST support the APIs specified for that event type."


let div = document.createElement("div");
div.setAttribute("ondragstart", ()=>0);
console.log(typeof div.ondragstart);


Result: "function", but objects are not draggable and dragstart event doesn't fire.

Expected result: "function" and objects are draggable. Otherwise, "undefined" and objects are not draggable.

Either support html5 drag'n'drop or make it undetectable. Also the issue is with the `draggable` attribute.

The documentation is incorrect, too:— 

  NOTE
  This technology is supported with Safari 11 in both macOS and iOS.

— No, it is not supported in iOS. At least, not universally on all iOS devices and it doesn't work on iPhone.
 
https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html

Scroll down to the bottom of that page, copy'n'paste the example into an html document, save it, start a web server, and access that html document  on your phone through your network (a local IP address will do). Turn on mobile debugging in safari on the mac to see the console. (Apple developers found this to be too much work, so put yet another burden onto everyone else.)

[Radar WebKit Bug Importer]

<rdar://problem/57257356>

[Wenson Hsieh]

It is intentional that the drag and drop gesture is not supported on iPhone; this matches platform (UIKit) behavior, with rare exceptions such as being able to drag editable text in native text views, in Mail compose, and using drag and drop to rearrange apps on the homescreen.

[[e-mail]]

@Wenson_Hsieh — If not draggable is intended behavior then there are three bugs here. 

1) BUG: browser reports false positives for drag events. 
— Remove all drag events so that the example code to detect drag support results false (no false positives for support check).

2) BUG: browser reports false positive for `draggable` property. The draggable property returns true if the element is draggable; otherwise, it returns false.

```
isDraggableSupported = (()=> {
   const div = document.createElement("div");
div.setAttribute("draggable", "true");
return div.draggable === true;
})();
```

isDraggableSupported must be false if draggable doesn't work, true otherwise. 

3) BUG: Documentation says drag drop is supported in iOS. This is wrong and misleading. The code does not do what the author says it does. If the code is not intended to work in iOS, then the documentation must say so. Current documentation does not reflect reality and is not easily tested. 3a) Make documentation reflect reality and 3b) make the demo run in the browser so it can be easily tested over http (so we don't need to copy, paste into a file, save, start a server, connect the iOS device to the computer via USB -- work the article's author apparently never did.

[Wenson Hsieh]

(In reply to [e-mail] from comment #3)
> @Wenson_Hsieh — If not draggable is intended behavior then there are three
> bugs here. 
> 
> 1) BUG: browser reports false positives for drag events. 
> — Remove all drag events so that the example code to detect drag support
> results false (no false positives for support check).
> 
> 2) BUG: browser reports false positive for `draggable` property. The
> draggable property returns true if the element is draggable; otherwise, it
> returns false.
> 
> ```
> isDraggableSupported = (()=> {
>    const div = document.createElement("div");
> div.setAttribute("draggable", "true");
> return div.draggable === true;
> })();
> ```
> 
> isDraggableSupported must be false if draggable doesn't work, true
> otherwise. 

Just to clarify — the request is to make the draggable attribute always return false if the current configuration doesn’t support drag and drop (e.g. iPhone)?

> 
> 3) BUG: Documentation says drag drop is supported in iOS. This is wrong and
> misleading. The code does not do what the author says it does. If the code
> is not intended to work in iOS, then the documentation must say so. Current
> documentation does not reflect reality and is not easily tested. 3a) Make
> documentation reflect reality and 3b) make the demo run in the browser so it
> can be easily tested over http (so we don't need to copy, paste into a file,
> save, start a server, connect the iOS device to the computer via USB -- work
> the article's author apparently never did.

I do agree that the docs should make it clear that drag and drop is not supported on iPhone (at least, not in Safari).

[Wenson Hsieh]

This also makes me wonder whether there ought to be a media query for drag and drop, similar to the existing “pointer” and “hover” capabilities.

[[e-mail]]

Media query is an API design idea. But is it a Webkit bug against any spec? Or should that maybe go on a mailing list as a future proposal? Is there a mailing list for where CSS is discussed where you can propose something like:—

 :drag-active
 :drop-over
 :drag-drop

— which could be then used with @supports.