I’ve got a bunch of nested DIVs. The CSS arranges them vertically but you can drag them to a new position within the parent DIV. Some of the DIV contain INPUT:

<div>
  <div draggable="true>
   <input id="title" type="text" placeholder="The message's title here">
   <label for="title">Title</label>
  </div>
  ...
</div>

What I have is working fine except that if you try to select the text in an INPUT, by dragging across it, the containing DIV gets moved.

How can I code it so that the DIV is draggable but not if mouse down starts within a text INPUT?