代码之家 › 专栏 › 技术社区 › LePioo

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

draggable border css html

LePioo · 技术社区 · 6 年前

在这个片段中,我制作了一个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>

1 回复 | 直到 6 年前

LePioo 6 年前

找出使元素可拖动的似乎是选择(奇怪的是,即使没有选择(突出显示)任何内容也会发生这种情况)

一个有效的解决方案是防止元素被选择成这样:

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

推荐文章

Brendan · 如何在Flatter中创建圆形化身周围的虚线边框

2 年前

jpgerb · 为什么寄宿生在桌子上的表现不同?

2 年前

Ponsiva · 有可能只在左边框上做一个渐变吗?

2 年前

rahulkesharwani · 使用CSS合并节标记的边框颜色

6 年前

steerr · 如何通过CSS去除色带边框?

6 年前

Mohammed Sabir · 如何使用css更改4个部分中边界半径的不同颜色集

6 年前

Whazz · 是否可以将WPF边界的BorderBrush绑定到ViewModel类中的变量?

6 年前

bellotas · 边框CSS-意外行为

6 年前

lhermann jfriend00 · Chrome:不透明度对象上的边框宽度不一致

6 年前

Zhihar · css:带背景的选项卡样式边框

6 年前