How to prevent text highlight while keeping drag functional

I'm following this tutorial:

https://learnvue.co/articles/vue-drag-and-drop

The final result is that I can drag the elements once I've highlighted the text that they contain. (e.g. if I highlight the text "Item A", I can then drag it to the other drop zone)

I want to disable text highlighting and make the text unselectable. Several answers here recommend the CSS tag user-select: none; but this makes it so the user cannot drag the element either.

I've created a sandbox showing both the original code (have to highlight the text to drag the element) and the code with user-select: none;. I'm at a loss for what to try next.

Sandbox Link

The draggable attribute is there but without a value.

I don't claim to completely understand why this is OK in the first (draggable/selectable) example but in the second example it seems to be necessary to specify the 'true' value.

  <div>
    <h1>Text Unselectable (but also un-draggable)</h1>
    <div class="drop-zone" @drop="onDrop($event, 1)" @dragover.prevent @dragenter.prevent>
      <div v-for="item in listOne" :key="item.title" class="drag-el" draggable="true" @dragstart="startDrag($event, item)">
        <span class="unselectable">{{ item.title }}</span>
      </div>
    </div>
    <div class="drop-zone" @drop="onDrop($event, 2)" @dragover.prevent @dragenter.prevent>
      <div v-for="item in listTwo" :key="item.title" class="drag-el" draggable="true" @dragstart="startDrag($event, item)">
        <span class="unselectable">{{ item.title }}</span>
      </div>
    </div>
  </div>