安卓浏览器下Sortable拖拽容器内操作链接失效 如何实现两功能共存

实现了Sortable可拖拽排序图片容器，支持拖拽单张图片调整排序位置，但受Sortable相关JS代码影响，容器内的图标操作按钮/链接在安卓浏览器下无法正常触发点击；移除Sortable初始化代码后链接可正常点击，需要调整实现让拖拽排序、链接点击两个功能同时正常工作。

$("#sortable").sortable({
            cursor: "move",
            start: function (event, ui) {
                ui.item.startPos = ui.item.index();
            },
            stop: function (event, ui) {
                var id = ui.item.attr("id");
                var PropID = $("#PropID").html();
                var obj = {
                    PropID: PropID,
                    ID: id,
                    Pos1: ui.item.startPos ? ui.item.startPos : 0,
                    Pos2: ui.item.index() ? ui.item.index() : 0
                }
                try {
                    $.ajax({
                        type: "POST",
                        url: "/members/pm-add-photos.aspx/MovePhoto",
                        data: JSON.stringify(obj),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            var result = msg.d;
                            if (result.toLowerCase().indexOf('error') > -1) {
                                triggertoast("", "We're sorry, there seems to have been an error.", "error");
                            }
                        },
                        error: function (response) {
                            console.log(response);
                        },
                    });

                }
                catch (err) {
                    triggertoast("", "We're sorry, there seems to have been an error.", "error");
                }
            }
        });
        $("#sortable").disableSelection();

两个核心问题导致安卓端点击失效：

1. 末尾调用的disableSelection()是jQuery UI提供的禁止文本选中方法，在安卓webkit内核浏览器下存在兼容性bug，会连带阻断内部可交互元素的click事件冒泡，导致按钮/链接点击无响应。
2. 默认Sortable配置没有排除内部可点击元素，点击按钮的动作会被拖拽事件监听拦截，没有触发原生点击逻辑。

• 第一步：删除代码末尾的$("#sortable").disableSelection();调用。如果需要实现拖拽时不选中图片/文本的效果，改用CSS实现即可，无JS兼容性问题：

#sortable .ui-sortable-helper {
  user-select: none;
  -webkit-user-select: none;
}

• 第二步：在Sortable初始化配置中添加cancel参数，将容器内所有可点击的操作元素排除在拖拽触发范围外，点击这些元素时不会启动拖拽逻辑，直接响应原生点击：

$("#sortable").sortable({
  cursor: "move",
  // 新增cancel配置，把容器内所有可点击元素的选择器都写入
  cancel: "a, button, .operation-icon, [role=button]",
  // 原有start、stop回调逻辑保持不变
  start: function (event, ui) {
    ui.item.startPos = ui.item.index();
  },
  stop: function (event, ui) {
    // 原有排序提交逻辑不变
    var id = ui.item.attr("id");
    var PropID = $("#PropID").html();
    var obj = {
        PropID: PropID,
        ID: id,
        Pos1: ui.item.startPos ? ui.item.startPos : 0,
        Pos2: ui.item.index() ? ui.item.index() : 0
    }
    try {
        $.ajax({
            type: "POST",
            url: "/members/pm-add-photos.aspx/MovePhoto",
            data: JSON.stringify(obj),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                var result = msg.d;
                if (result.toLowerCase().indexOf('error') > -1) {
                    triggertoast("", "We're sorry, there seems to have been an error.", "error");
                }
            },
            error: function (response) {
                console.log(response);
            },
        });
    }
    catch (err) {
        triggertoast("", "We're sorry, there seems to have been an error.", "error");
    }
  }
});

• 第三步：如果部分老旧安卓机型仍存在点击/拖拽识别冲突，在配置中添加100-150ms的拖拽触发延迟，短按按钮不会触发拖拽，只有长按超过延迟时间才会启动排序，彻底区分两个操作：

// 加到sortable配置项中
delay: 150,
tolerance: "pointer"

内容的提问来源于stack exchange，提问作者jiya ranka