I am working on a system which uses the HTML Drag & Drop API.
If I add the draggable="true" attribute to the select element, then it does not work as I expect. It is not draggable. When I try to drag it, it just opens the select dropdown. I could make it draggable by adding pointer-events:none to the CSS, but then the select element becomes unavailable.
I need to have the behavior like the standard input element. When I create an input element that has draggable="true" then I should be able to click it to write inside it, and I should also be able to press and hold down to drag it somewhere else.
Here is my code snippet:
<div>Works with input: <input type="text" draggable="true" /></div>
<div>
Does not work with select:
<select draggable="true">
<option>Example Option</option>
</select>
</div>You could wrap the select with a div and apply a small padding and then you would be able to drag the div, and/or you could put an icon within the div and then allow that to be dragged as well.
The emoji hand, ✋ ✋, is just for demonstration purposes.
Also if you apply cursor: grab to this div then it will be obvious to the user when the select can be dragged.
<div>Works with input: <input type="text" draggable="true" /></div>
<div>
<div>
Does not work with select:
<div style="display:inline-block; padding:2px; cursor: grab ;" draggable="true">
<select>
<option>Example Option 1</option>
<option>Example Option 2</option>
<option>Example Option 3</option>
</select>✋
</div>
</div>
</div>