How to use Html Drag & Drop API with select element

user_19707923 0
Viewed 51

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>

css html javascript
1 Answers

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, ✋ &#9995;, 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>&#9995;
    </div>
  </div>
</div>

user_185953210
Related