如何在iOS 11和iOS 12的WKWebView中禁用Drag & Drop功能？

我之前做iOS项目时刚好碰到过这个问题——iOS 11和12的WKWebView里，长按图片或者链接总会触发Drag & Drop会话，用户能拖动这些元素，有时候会打乱产品的交互逻辑。下面分享两种亲测有效的解决方案，你可以根据自己的场景选择：

方法一：注入JavaScript精准禁用（推荐） #

如果你的网页是自己可控的，或者可以通过WKWebView注入脚本，这种方法最靠谱，能精准针对图片和链接禁用拖拽，不会影响文本选择、长按复制等其他功能。

你可以在WKWebView加载完成后，注入这段JS代码：

// 阻止图片的拖拽事件
document.addEventListener('dragstart', function(e) {
    if (e.target.tagName.toLowerCase() === 'img') {
        e.preventDefault();
    }
}, false);

// 阻止链接的拖拽事件
document.addEventListener('dragstart', function(e) {
    if (e.target.tagName.toLowerCase() === 'a') {
        e.preventDefault();
    }
}, false);

在Native代码里，你可以在WKNavigationDelegate的webView(_:didFinishNavigation:)方法中执行注入：

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    let disableDragJS = """
        document.addEventListener('dragstart', function(e) {
            if (e.target.tagName.toLowerCase() === 'img' || e.target.tagName.toLowerCase() === 'a') {
                e.preventDefault();
            }
        }, false);
        """
    webView.evaluateJavaScript(disableDragJS) { _, error in
        if let error = error {
            print("注入JS失败：\(error.localizedDescription)")
        }
    }
}

如果想更彻底，直接禁用所有元素的拖拽，也可以把代码简化成：

document.addEventListener('dragstart', function(e) {
    e.preventDefault();
}, false);

方法二：Native端拦截系统长按手势（适合不可控网页） #

如果网页不是你维护的，没法修改或注入JS，可以试试通过Native代码禁用WKWebView的系统长按手势——不过要注意，这种方法会同时禁用所有依赖长按的功能，比如文本选择、链接预览等，需要权衡使用。

你可以创建一个WKWebView的子类，重写addGestureRecognizer(_:)方法，拦截系统的长按手势：

class NoDragWKWebView: WKWebView {
    override func addGestureRecognizer(_ gestureRecognizer: UIGestureRecognizer) {
        // 识别并禁用系统的长按手势
        if let longPress = gestureRecognizer as? UILongPressGestureRecognizer {
            longPress.isEnabled = false
        }
        super.addGestureRecognizer(gestureRecognizer)
    }
}

之后直接使用这个子类代替原生的WKWebView即可。

内容的提问来源于stack exchange，提问作者Johannes Fahrenkrug