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

Question

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

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

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

不幸的是，在较新的iPad上，safari允许您拖动任何网页上的任何图像或链接。这会让我的拖放变得混乱，因为它会开始拖动父块，然后块内的图像会分开并自行拖动。

从其他堆栈溢出帖子，建议使用以下CSS。我已将它应用于所有子元素，链接和图像，但图像和链接仍然分开，并且可以在较新的ipads上自行拖放。

如何通过3D触摸防止新版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);
}

没有这个工作。我已经验证它可以递归地应用于所有在新的ipads上仍然可拖动的子img和链接元素。

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

Answer 1

简单如下：

img draggable =“false”src =“image.png”alt =“图像描述”

从：

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