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

Question

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

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

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

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

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

如何防止在具有 3D Touch 功能的新型 iPad 上长按拖放图像和链接？

.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);
}

这些都不起作用。我已经验证它递归地应用于所有在较新的 ipad 上仍然可拖动的子 img 和链接元素。

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

Answer 1

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

例如：

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

从：

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