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

Question

在这段代码中，我制作了一个 4x4 网格

虽然这个网格有一些奇怪的行为：当你 "mousedown" 在一些图块上然后移动你的鼠标时，网格就像一个可拖动的图像（但不是所有的图块 "travels" 拖拽半透明反馈...).

如何防止这种行为？

.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>

Answer 1

发现它似乎是使元素可拖动的选择（很奇怪，因为即使没有选择任何东西（突出显示）也会发生这种情况）

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

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

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

Elements with unwanted draggable behaviour

html

css

border

draggable