CSS禁止元素拖拽

作者：System 时间：2024年08月15日分类：所有,css 字数：578

要在CSS中禁止拖拽元素，可以使用user-select属性设置为none，或者使用pointer-events属性设置为none。

使用user-select: none的例子：




.no-drag {
  -webkit-user-drag: none;
  user-select: none;
}

使用pointer-events: none的例子：




.no-drag {
  pointer-events: none;
}

user-select: none可以防止文本被选中，而pointer-events: none则阻止了鼠标事件，包括点击和拖拽，在这个属性添加到元素上后，元素上的点击事件将无法触发。

HTML 示例：




<div class="no-drag">这个元素不可拖拽</div>

在这个例子中，无论是user-select还是pointer-events，都可以阻止元素的拖拽行为。选择哪种方式取决于你具体的需求。如果你想要禁止文本的选中，可以使用user-select。如果你想要禁止所有交互，包括点击，可以使用pointer-events。