允许在HTML 5可拖动子元素上选择文本
允许在HTML 5可拖动子元素上选择文本
提问于 2017-07-01 05:46:37
如果有一个包含可拖动行的表，其中每行都是文本，那么用户如何仍然能够从列中选择draggable=true 呢？
<table>
<thead>..</thead>
<tbody>
..
<tr draggable="true">
<td>..</td>
<td>Cool text but you can't select me</td>
<td>..</td>
</tr>
..
</tbody>
</table>另一个简单的例子(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>回答 2
Stack Overflow用户
回答已采纳
发布于 2017-07-01 19:30:56
我能看到这个工作的唯一方法是实际检查哪个元素触发了事件
if (e.target === this) {...}堆栈代码段
(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"开始，我使用了不同的拖动方法。
Stack Overflow用户
发布于 2018-07-07 04:23:35
我们需要做两件事。
- 一件事是限制拖动事件仅在指定区域触发，例如，拖动手柄。
- 的另一件事是，我们只有在设置了文本的div上才能选择content类。我们这样做的原因是，已经设置为draggable的元素，浏览器将在该元素上添加用户选择的默认规则: 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44855232
复制相关文章
相似问题