Snap.svg如何实现仅指定变量为true时Element.drag()拖拽才生效

问题原因 #

你当前的实现只会在调用dragMap()时做一次mousemode判断，只要判断通过就会给#zoombox永久绑定拖拽事件，后续mousemode变更不会自动移除已经绑定的事件，所以拖拽效果会一直生效。

解决方案 #

方案1：切换mousemode时主动绑定/解绑拖拽事件 #

Snap.svg的.drag()方法传入null作为参数即可解绑拖拽，你可以封装成状态更新方法，每次修改mousemode后同步调用即可：

// 封装拖拽状态更新方法
function updateDragState() {
  if (mousemode === 'pan') {
    Snap('#zoombox').drag(move, start, stop);
  } else {
    // 解绑所有拖拽事件
    Snap('#zoombox').drag(null);
  }
}

// 初始化调用
updateDragState();

// 后续每次修改mousemode之后，主动调用一次更新即可
// 示例：切换为simple模式
mousemode = 'simple';
updateDragState();

该方案性能更好，非pan模式下不会有多余的事件触发。

方案2：在拖拽回调内部判断mousemode再执行逻辑 #

如果不想频繁做事件绑定解绑操作，也可以直接在你已有的move、start、stop回调函数最开头加判断，不符合模式要求就直接终止逻辑执行：

function start(x, y, evt) {
  if (mousemode !== 'pan') return;
  // 此处保留你原有start的逻辑代码
}

function move(dx, dy, x, y, evt) {
  if (mousemode !== 'pan') return;
  // 此处保留你原有move的逻辑代码
}

function stop(evt) {
  if (mousemode !== 'pan') return;
  // 此处保留你原有stop的逻辑代码
}

该方案实现更简单，不需要额外维护事件绑定状态。

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