C# Blazor - Draggable stops ability to highlight text

Question

I have something like the following:

<div class="outer" ondragover="event.preventDefault();">
  @foreach (CustomObject o in ObjectList)
  {
     <div draggable="true" @key="o.Rank" @ondrag="@(()=> StartDrag(o))" @ondrop="@(()=> Drop(o))" class="inner">
        <textarea></textarea>
        <input type="text">
        <button></button>
        <textarea></textarea>
     </div>
  }
</div>

I want to be able to drag and drop the whole section but the problem is that it stops allowing the highlighting of text within a text area or text box.

Is there a good way of allowing for highlighting of text and being able to drag/drop everything?

Answer 1

Try using these settings on inner elements

<div draggable="true" @key="o.Rank" @ondrag="@(()=> StartDrag(o))" @ondrop="@(()=> Drop(o))" class="inner">
           <textarea draggable="true"
           ondragstart="event.preventDefault();
                        event.stopPropagation();"></textarea>     
        <input type="text" draggable="true"
           ondragstart="event.preventDefault();
                        event.stopPropagation();">
        <button draggable="true"
           ondragstart="event.preventDefault();
                        event.stopPropagation();"></button>
        <textarea draggable="true"
           ondragstart="event.preventDefault();
                        event.stopPropagation();"></textarea>
     
     </div>