具有不需要的可拖动行为的元素答案

【问题标题】：Elements with unwanted draggable behaviour具有不需要的可拖动行为的元素
【发布时间】：2019-01-22 16:43:27
【问题描述】：

在这个 sn-p 中，我制作了一个 4x4 网格

这个网格有一些奇怪的行为：当你在某个图块上“鼠标按下”然后移动你的鼠标时，网格就像一个可拖动的图像（但并不是所有的图块都“移动”与拖动半透明反馈......）。

如何防止这种行为？

.line{
white-space:nowrap;
}
.tile{
width:25px;
height:25px;
border:1px solid black;
display:inline-block;
vertical-align: bottom;
}
*{
margin:0;
padding:0;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="line"><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div></div>
    <div class="line"><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div></div>
    <div class="line"><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div></div>
    <div class="line"><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div></div>
  </body>
</html>

【问题讨论】：

标签： html css border draggable

【解决方案1】：

发现似乎是使元素可拖动的选择（奇怪，因为即使没有选择任何内容也会发生（突出显示））

一个可行的解决方案是防止像这样选择元素：

.tile, .tile::after, .tile::before {
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-app-region: no-drag;
cursor: default;
}

【讨论】：