Allow select text on a HTML 5 draggable child element

Question

Having a table with draggable rows where each row is draggable=true, how can the user still be able to select text from a column?

<table>
 <thead>..</thead>
 <tbody>
  ..
  <tr draggable="true">
   <td>..</td>
   <td>Cool text but you can't select me</td>
   <td>..</td>
  </tr>
  ..
</tbody>
</table>

Another simple example (https://codepen.io/anon/pen/qjoBXV)

div {
  padding: 20px;
  margin: 20px;
  background: #eee;
}

.all-copy p {  
  -webkit-user-select: all;  /* Chrome all / Safari all */
  -moz-user-select: all;     /* Firefox all */
  -ms-user-select: all;      /* IE 10+ */
  user-select: all;          /* Likely future */   
}    
<div class="all-copy" draggable="true">
      <p>Select me as text</p>
    </div>

Answer 1

There are two things we need to do.

• One thing is limitting the drag event only trigger on specified area, for example, the drag handle.

• The other thing is that we only set the text on the div with content class can be selected. The reason why we do so is that the element that has been set to draggable, on which browser will add a default rule user-select: none.

const itemEl = document.querySelector('.item');
const handleEl = document.querySelector('.handle');

let mouseDownEl;

itemEl.onmousedown = function(evt) {
  mouseDownEl = evt.target;
}

itemEl.ondragstart = function(evt) {
  // only the handle div can be picked up to trigger the drag event
  if (mouseDownEl.matches('.handle')) {
    // ...code
  } else {
    evt.preventDefault();
  }
}

.item {
  width: 70px;
  border: 1px solid black;
  text-align: center;
}

.content {
  border-top: 1px solid gray;
  user-select: text;
}

<div class="item" draggable="true">
  <div class='handle'>handle</div>
  <div class='content'>content</div>
</div>