如何修改OpenSeadragon的拖拽触发按键为右键长按？

你原来的代码没法生效，问题出在这两点：

• 错用了OpenSeadragon.Button，这个类是用来创建自定义按钮控件的，根本不是配置全局拖拽行为的工具
• 直接修改event.buttons的逻辑，没法改变OpenSeadragon默认的拖拽触发规则

要实现右键长按拖拽，按下面的步骤来：

核心思路 #

先关闭OpenSeadragon默认的鼠标导航功能，然后手动监听右键的按下、移动、抬起事件，控制视图的拖拽状态，同时要阻止右键的默认上下文菜单，避免干扰操作。

完整代码示例 #

<script>
    // 初始化Viewer，替换成你自己的容器ID、资源路径和图片源
    var viewer = OpenSeadragon({
        id: "view",
        prefixUrl: "openseadragon/images/",
        tileSources: {
            type: "image",
            url: "your-image.jpg"
        },
        mouseNavEnabled: false // 禁用默认鼠标导航，避免和自定义拖拽冲突
    });

    // 标记右键是否处于按下状态
    var isRightButtonDown = false;

    // 监听鼠标按下事件
    viewer.element.addEventListener('mousedown', function(e) {
        // 鼠标事件中，右键对应的button值为2
        if (e.button === 2) {
            isRightButtonDown = true;
            e.preventDefault(); // 阻止默认右键行为
            viewer.viewport.beginDrag(e); // 启动视图拖拽
        }
    });

    // 监听鼠标移动事件
    viewer.element.addEventListener('mousemove', function(e) {
        if (isRightButtonDown) {
            viewer.viewport.updateDrag(e); // 更新拖拽位置
            e.preventDefault();
        }
    });

    // 监听鼠标抬起事件
    viewer.element.addEventListener('mouseup', function(e) {
        if (e.button === 2) {
            isRightButtonDown = false;
            viewer.viewport.endDrag(e); // 结束拖拽
        }
    });

    // 鼠标移出容器时结束拖拽，防止状态异常
    viewer.element.addEventListener('mouseleave', function(e) {
        isRightButtonDown = false;
        viewer.viewport.endDrag(e);
    });

    // 阻止容器内的右键菜单弹出
    viewer.element.addEventListener('contextmenu', function(e) {
        e.preventDefault();
    });
</script>

关键细节说明 #

• 必须禁用mouseNavEnabled：不然默认的左键拖拽会继续生效，和自定义的右键拖拽产生冲突
• 右键的button值是2：鼠标事件里，左键对应0，中键对应1，右键对应2，别搞混
• 处理mouseleave事件：防止鼠标移出容器后，右键抬起时没触发结束拖拽，导致后续操作状态异常
• 阻止右键菜单：拖拽时弹出右键菜单会打断操作，必须通过contextmenu事件阻止默认行为

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