I have been working on implementing tab close functionality in Bootstrap using an <a> element that includes the tab title text along with a close icon displayed as a background image within a span.
In order to ensure smooth operation, it is essential for the close icon to be undraggable. The intention is that if a user clicks on the icon and moves away without releasing the mouse button, it should imply 'I didn't mean to click' rather than initiating a drag action.
Furthermore, it is important that the text surrounding the icon remains unselectable. This prevents unintended text selection when moving the mouse away from a clicked icon, which could lead to a poor user experience.
Although I have created a demo that works well in Webkit, Opera, and IE11, the solution does not function properly in Firefox.
The current approach involves using Javascript to make the <a> element undraggable and applying CSS (as well as unselectable) to prevent text selection around the icon.
However, there seems to be an issue with Firefox where setting text as unselectable causes dragging to become enabled again, making both the tab and the icon draggable. In contrast, other browsers do not exhibit this behavior, allowing users to click and drag on the icon or tab title without triggering unwanted actions.
If anyone has any suggestions on how to address this problem, or if there is a more effective way to manage 'unselectable' behavior using JavaScript, I would greatly appreciate your insights. Thank you.