How to unlock an input?

Question

I need to have the move(draggable) property of the elements. But when I use the property(draggable) on input(text), I lose the ability to scroll the text in the intuition. Whenever I need to scroll through the text it move element.

.list input{
  display: block;
  width: 60px
}

<div class="list">
  <input type="text" draggable='true' value='text1 text2 text3 text4 text5'>
  <input type="text" draggable='true' value='text1 text2 text3 text4 text5'>
  <input type="text" draggable='true' value='text1 text2 text3 text4 text5'>
</div>

Help me fix it.

Answer 1

There isn't a way to have it both draggable and scrollable (with the arrow).

What you'll want to do is either: - Make the input wide enough you'll never need to scroll - Wrap it up with something and make that draggable instead

A lot of UIs that allow for dragging around and ordering things will have a "handle" element which is where you grab it to drag, and that wraps up it's contents. That may not work with the draggable property all by itself, but you can use mousedown and mouseup events on the handle to toggle draggable on and off.