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

栏目: 类库 · 发布时间: 2021-04-13

简介  这篇文章主要介绍了使用3D Touch防止在较新的iPad上拖动图像和链接以及相关的经验技巧,文章约1164字,浏览量101,点赞数3,值得参考!

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

由于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和链接元素。

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

答案

简单如下:

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

从:

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


以上就是本文的全部内容,希望对大家的学习有所帮助,版权归原作者或者来源机构所有,感谢作者,如果未能解决你的问题,请参考以下文章。

iOS14 将移除 3D Touch 功能?苹果终于回应了...

适用于iOS网络应用的多个“苹果触摸启动图像”分辨率(尤其适用于iPad)?

HTML5新属性-----拖放

EVC支持列表(示例代码)

3d touch 应用 2 -备用(示例代码)