Question

如果每个行都为rawData.Activate，表格中有可拖动的行，那么用户如何能够从列中选择文字？

draggable=true

另一个简单的例子（https://codepen.io/anon/pen/qjoBXV）

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

Answer 1

我能看到这项工作的唯一方法是实际检查哪个元素触发了事件

if (e.target === this) {...}

Stack snippet

(function (elem2drag) {
  var x_pos = 0, y_pos = 0, x_elem = 0, y_elem = 0;  
  
  document.querySelector('#draggable').addEventListener('mousemove', function(e) {
    x_pos = e.pageX;
    y_pos = e.pageY;
    if (elem2drag !== null) {
        elem2drag.style.left = (x_pos - x_elem) + 'px';
        elem2drag.style.top = (y_pos - y_elem) + 'px';
    }  
  })

  document.querySelector('#draggable').addEventListener('mousedown', function(e) {
    if (e.target === this) {
      elem2drag = this;
      x_elem = x_pos - elem2drag.offsetLeft;
      y_elem = y_pos - elem2drag.offsetTop;
      return false;
    }  
  })
  
  document.querySelector('#draggable').addEventListener('mouseup', function(e) {
    elem2drag = null;
  })
})(null);

#draggable {
  display: inline-block;
  background: lightgray;
  padding:15px;
  cursor:move;
  position:relative;
}
span {
  background: white;
  line-height: 25px;
  cursor:auto;  
}

<div id="draggable">
  <span>Select me as text will work<br>when the mouse is over the text</span>
</div>

自Firefox has issue with draggable="true"以来，我使用了不同的拖拽方法。

Answer 2

有两件事要做。

一件事是限制拖动事件仅在指定区域（例如，拖动手柄）上触发。
另一件事是我们只将div上的文本设置为 content 类别即可。之所以这样做，是因为已将元素设置为可拖动，浏览器将在该元素上添加默认规则用户选择：无。

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>

允许在HTML 5可拖动子元素上选择文本

2 个答案: