Open
Bug 725156
Opened 13 years ago
Updated 3 years ago
Drag and drop does not proceed unless a dragstart handler sets data
Categories
(Core :: DOM: Copy & Paste and Drag & Drop, defect)
Core
DOM: Copy & Paste and Drag & Drop
Tracking
()
NEW
People
(Reporter: natevw, Unassigned)
References
Details
(Keywords: testcase)
Attachments
(1 file)
|
3.71 KB,
text/html
|
Details |
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10
Steps to reproduce:
Set draggable=true attribute on an element.
Actual results:
Firefox did not allow me to drag the element until I added a 'dragstart' event handler that setData on the event's datatransfer object.
Expected results:
While the non-normative introduction to the W3C DnD spec encourages the user to store data in a dragstart handler, the processing model (http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model) strongly implies that the event should proceed even if there is no dragstart handler:
"9. ... If the [dragstart] event is canceled, then the drag-and-drop operation should not occur; abort these steps.
10. Initiate the drag-and-drop operation"
That is, only if the dragstart event is *cancelled* would the drag and drop operation not occur. Otherwise, it should proceed with the data transfer as initialized in the preceding steps.
Can you please provide a minimized testcase we can use to reproduce this bug?
Keywords: testcase-wanted
|
Reporter | |
Comment 2•13 years ago
|
||
Here's a sample page showing the issue. I would expect (from W3C spec and Safari implementation) the blue box to be draggable whether data is set or not, but in FF it is only draggable if the "set data" checkbox is set.
|
|
Reporter | |
Comment 3•13 years ago
|
||
Comment on attachment 597598 [details]
Test case
><!doctype html>
><html>
> <head>
> <meta charset="utf-8">
> <title>Drag and Drop event debugging</title>
> <style>
> #source { width: 50px; height: 50px; background: blue; margin: 50px; }
> .target { width: 250px; height: 250px; /*border: 2px dashed black;*/ margin: 25px; }
> #passive { border-color: green; }
> #active { border-color: red; }
> .child { width: 125px; height: 125px; background: yellow; }
> .floated { float: left; }
>
> td { vertical-align: top; }
> .over { background: rgba(255,0,0,0.5); }
>
> /* Toggling this makes FF seem to forget DnD eventing state and start algorithm over.
> This can cause second parent dragenter, or child dragenter without parent dragleave. */
> .over { position: relative; }
> </style>
> </head>
> <body>
>
> <label><input type="checkbox" id="set_data"> Set data</label>
> <div id="source" draggable="true"></div>
> <!--
> <div id="passive" class="target floated"><div class="child"></div></div>
> <div id="active" class="target floated"></div>
> -->
>
> <table border class="floated">
> <tbody>
> <tr><td id="passive" class="target"><div class="child"></div></td></tr>
> </tbody>
> </table>
>
> <table border class="floated">
> <tbody>
> <tr><td id="active" class="target"></td></tr>
> </tbody>
> </table>
>
> <div id="counter"></div>
>
> <script>
> document.getElementById('source').addEventListener('dragstart', function (e) {
> if (document.getElementById('set_data').checked) e.dataTransfer.setData('application/x-workaround', "- data to make Firefox start drag -");
> });
>
> var pEl = document.getElementById('passive');
> pEl.addEventListener('dragenter', function (e) {
> console.log('dragenter', e.target.className);
> pEl.classList.add('over');
> }, false);
> pEl.addEventListener('dragleave', function (e) {
> console.log('dragleave', e.target.className);
> pEl.classList.remove('over');
> }, false);
>
>
> var aEl = document.getElementById('active')
> var aCounter = 0, aChild = null;
> aEl.addEventListener('dragenter', function (e) {
> console.log('dragenter', e.target.className);
> if (!aCounter) {
> aEl.classList.add('over');
> aChild = document.createElement('div');
> aChild.className = 'child';
> aEl.appendChild(aChild);
> }
> e.dataTransfer.dropEffect = 'copy';
> e.preventDefault();
>
> aCounter += 1;
> displayCounter();
> }, false);
> aEl.addEventListener('dragover', function (e) {
> //e.dataTransfer.dropEffect = 'copy';
> e.preventDefault();
> }, false);
> aEl.addEventListener('dragleave', function (e) {
> console.log('dragleave', e.target.className);
> aCounter -= 1;
> displayCounter();
> if (!aCounter) {
> aEl.classList.remove('over');
> aEl.removeChild(aChild);
> }
> }, false);
> aEl.addEventListener('drop', function (e) {
> console.log(e.dataTransfer.getData('application/x-workaround'), e.dataTransfer.getData('text/plain'));
> e.preventDefault();
> });
>
> var cEl = document.getElementById('counter');
> function displayCounter() {
> cEl.textContent = aCounter;
> }
> displayCounter();
>
> </script>
> </body>
></html>
Attachment #597598 -
Attachment mime type: text/plain → text/html
Thanks.
Status: UNCONFIRMED → NEW
Component: Untriaged → General
Ever confirmed: true
Keywords: testcase-wanted → testcase
OS: Mac OS X → All
QA Contact: untriaged → general
Hardware: x86 → All
Version: 10 Branch → Trunk
|
||
Updated•13 years ago
|
Component: General → DOM: Events
Product: Firefox → Core
|
||
Updated•13 years ago
|
Component: DOM: Events → Drag and Drop
|
||
Comment 8•6 years ago
|
||
Any news here? This causes for example: https://github.com/buefy/buefy/issues/1398
|
||
Updated•3 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•