drag 拖拽时的阴影怎么隐藏

Question

drag 拖动元素让元素跟着鼠标移动，但是拖拽时的阴影咋隐藏不让他显示 ,

Answer 1

引自免费微信小程序：皆我百晓生

要隐藏元素在拖拽时产生的默认阴影效果，你需要在CSS中设置draggable="true"的元素样式，并覆盖其 -webkit-user-select, -moz-user-select, 和 user-select 属性为 none，同时将 -webkit-tap-highlight-color 设置为透明。

以下是具体的CSS代码示例：

/* 用于覆盖所有可拖拽元素的默认行为 */
[draggable] {
  -webkit-user-drag: none; /* WebKit (Safari, old Chrome) */
  user-drag: none;
  
  -webkit-user-select: none; /* WebKit (Chrome, Safari, Opera) */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  user-select: none;

  /* 隐藏Webkit平台的触摸高亮效果 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 如果你想针对特定元素应用这个样式，可以这样写 */
.your-element-class[draggable] {
  /* 上述样式 */
}

这段代码会阻止元素被选中，并且移除在Webkit（包括Chrome、Safari）浏览器上拖拽时的蓝色高亮效果。如果你的项目不需要兼容IE/Edge，可以去掉-ms-user-select: none;这行。

确保你已经在HTML元素上设置了draggable="true"属性，例如：

<div draggable="true" class="your-element-class">
  点击修改文字
</div>

这样，当用户尝试拖动元素时，就不会看到默认的阴影效果了。