使用 3D Touch 防止在较新的 iPad 上拖动图像和链接

Question

我正在实现按住以拖动网页的 table 个元素。

由于 Android 和 iOS 上的各种长按菜单以及跨浏览器触摸功能差异，此功能非常困难。

我的块项目基本上是 div 包含图像和 link 的标签。父块项目需要可拖动。

不幸的是，在较新的 iPad 上，safari 允许您拖动任何图像或 link 到任何网页。这会打乱我的拖放操作，因为它会开始拖动父块，然后块内的图像会分离出来并可以自行拖动。

从其他堆栈溢出帖子中，推荐了以下 CSS。我已经将它应用于所有子元素，包括 links 和图像，但图像和 links 仍然分开并且可以在较新的 ipad 上自行拖动。

如何防止在具有 3D 触摸功能的较新 iPad 上长按拖放图像和 links？

.drag-parent-wrapper * {
    @include user-select(none);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

NONE 的作品。我已经验证它递归地应用于所有子 img 和 link 元素，这些元素在较新的 ipad 上仍然可以拖动。

默认情况下我无法阻止任何触摸或鼠标事件，否则我的功能在所有设备上都存在风险。

Answer 1

可以使用图片标签的 draggable 属性关闭此行为。

例如：

<img draggable="false" src="image.png" alt="image description" />

发件人：

http://www.denisbouquet.com/css-forbid-selection-user-select-dragging-ghost-image/

使用 3D Touch 防止在较新的 iPad 上拖动图像和链接

Prevent Drag of images and Links on newer iPads with 3D Touch

css

cross-browser

3dtouch