568313 - Impossible to make <button>s draggable

Status: NEW

(Core :: DOM: Copy & Paste and Drag & Drop, defect)

Description

[Giorgio]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.2; WOW64; en-US; rv:1.9.3a5pre) Gecko/20100525 Minefield/3.7a5pre ( .NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.2; WOW64; en-US; rv:1.9.3a5pre) Gecko/20100525 Minefield/3.7a5pre ( .NET CLR 3.5.30729)

hi, as summary says, button can't be draggable
see the simple test attached

Reproducible: Always

Comment 1

[Giorgio]

Attachment: testcase

Comment 2

[goudry.nicolas]

Any news about this?

Thanks

Comment 3

[nenadgolubovic]

Firefox requires 'something' (that we call 'init' here) to be set in dragstart event to initialize the rest of drag events to occur.

This is probably because all of the DOM elements are draggable="true" by default in XUL. (reference: https://bugzilla.mozilla.org/show_bug.cgi?id=646823#c4)

Example:

<div id="something" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'node');">Drag me</div>

Chrome doesn't require such 'initialization'.

Comment 4

[Maël Lavault]

I also get this bug and it's quite annoying. It works perfectly on Chrome but not on Firefox.

Comment 5

[olivier.the.olive]

I can confirm that this bug occurs on Firefox 53.0.3 (64-bit) running on Linux. (Ubuntu 16.04).

I am aware of no work-around other than to redefine the <button> as another element, which isn't semantically valid for my scenario.

Comment 6

[Ethan Jaszewski]

I can also confirm on Firefox 52.0 LTS on Windows 10.

Comment 7

[Ethan Jaszewski]

(In reply to Ethan Jaszewski from comment #6)
> I can also confirm on Firefox 52.0 LTS on Windows 10.

This should read ESR, not LTS. Full user agent:

Mozilla/5.0 (Windows NT 10.0; WOW64; rv:52.0) Gecko/20100101 Firefox/52.0

Comment 8

[marco.a.simao]

It is still no working to this day.

Comment 9

[martin.r.pitt]

Can confirm bug still exists in Firefox 60.0.1 on macOS.

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:60.0) Gecko/20100101 Firefox/60.0

Comment 10

[Tim Underhay]

Dear Mozilla,  Respectfully, this bug has been open for 8 years.  Could somebody please acknowledge it and deliver a fix?  It appears to be affecting quite a few people.

Comment 11

[davidc.luhr]

This bug still persists in Firefox 61.0.1 in MacOS and Windows. It is currently blocking a critical feature of our application from working and the only workaround would force us to compromise on semantic markup. As an organization committed to accessibility, I hope Mozilla can dedicate some resources to fixing this longstanding bug.

Comment 12

[Nils Huhta]

Our drag and drop features, needs to be working on img tags, this bug stopping all that...

Comment 13

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 14

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.

Comment 15

[kobi]

Any updates?

This bug has been open for 10 years and still exists in FF 70.0.1.

Comment 16

[Ufku]

Firefox 74.0.1 on windows:

A button is draggable only if you start dragging from its content. Not draggable if you start from the padding area
If no html content(even if it has css content) => Not draggable at all

Ex: https://jsbin.com/xeqowucuho/edit?html,css,js,output

Comment 17

[Xidorn Quan [:xidorn] UTC+10]

Attachment: testcase

It seems the original testcase provided in comment 1 has to some extent be solved, but the testcase provided in comment 16 shows it's still a problem in other situation.

This is a simplified testcase of the one in comment 16 which shows the problem. All three buttons should be equally draggable in this testcase.

Comment 18

[Xidorn Quan [:xidorn] UTC+10]

Lack of draggable support can inhibit the adoption of semantic <button> where they are deserved, and force developers to use role="button" with other elements instead.

Comment 21

[Alex Reardon]

Related: https://bugzilla.mozilla.org/show_bug.cgi?id=1967645

Comment 23

[Alex Reardon]

For others:

A <button> element in firefox itself is not draggable. However, the <button> can itself be dragged from any content within the <button>.

So to work around this issue, ensure that the content of your <button> (eg a span) takes up the full size of the <button>.

• ❌ Cannot drag from ::before or ::after on the button
• ❌ Cannot drag from padding around text content in a button (<button>content</button>)
• ❌ Cannot drag from the border of the button
• ✅ Can drag the button from content of the button (eg inner text or inner elements)
• 🧑‍🔧 Workaround: make an inner element take up the full size of the <button>
• ⚖️ Up to you if you want to put the border on the inner element so that users can drag from the border, but I expect keeping the border on the button itself is reasonable for most folks

Workaround example: https://codesandbox.io/p/sandbox/x7x7cy

Comment 24

[Renan LE CARO]

Thank you Alex, that's a good workaround.

Comment 26

[Edgar Chen [:edgar]]

Attachment: Bug 568313 - Make buttons draggable when a drag is started from the button itself;

We already support dragging a button when the drag starts from its text content.