Estoy trabajando en un sistema que utiliza la API HTML Drag & Drop.
Si agrego el atributo draggable="true" al elemento de select , entonces no funciona como esperaba. No es arrastrable. Cuando trato de arrastrarlo, simplemente abre el menú desplegable de select . Podría hacerlo arrastrable agregando pointer-events:none al CSS, pero luego el elemento de select deja de estar disponible.
Necesito tener el comportamiento como el elemento de entrada estándar. Cuando creo un elemento de entrada que tiene draggable="true" , entonces debería poder hacer clic en él para escribir dentro de él, y también debería poder presionar y mantener presionado para arrastrarlo a otro lugar.
Aquí está mi fragmento de código:
<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>Podría envolver la selección con un div y aplicar un pequeño relleno y luego podría arrastrar el div, y/o podría poner un ícono dentro del div y luego permitir que se arrastre también.
La mano emoji, ✋ ✋ , es solo para fines de demostración.
Además, si aplica cursor: grab este div , entonces será obvio para el usuario cuándo se puede arrastrar la select .
<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>