Interaction between unselectable and undraggable in Firefox

Question

I'm implementing tab close functionality in Bootstrap with an <a> element which contains the tab title text, as well as a close icon (as a background image in a span).

To make this work well, the icon must be undraggable (if you click the mouse on the icon, and then move away, you want this to mean 'I didn't mean to click', rather than 'I want to drag the icon').

This also means that the text around the icon must be unselectable, since moving the mouse away from a clicked icon will just select the surrounding text, which isn't good.

This fiddle is my current solution, which works for Webkit, Opera, and IE11. However, it doesn't work for Firefox.

The code uses Javascript to set the <a> element to undraggable, and CSS (and unselectable) to set the text unselectable.

The problem is that, for Firefox, setting the text unselectable actually turns on dragging again, so the tab and the icon are draggable in Firefox. In the other browsers, you can click and drag on the icon (or the tab title) and nothing happens.

Any ideas how to fix this? Perhaps there's a better way to handle 'unselectable' with JS? Thanks.

Answer 1

Solution fiddle here. The problem only happens when using the draggable property to disable dragging; the fiddle sets an event listener on dragstart instead. This works on FF, Chrome, Safari, Opera, and IE11. This also has the advantage that you don't need any CSS to disable selection. Opera still needs unselectable="on", though.