Draggabilly调用函数未识别对象：无法禁用拖拽实例

我定义了一个Draggabilly实例：

var draggie = new Draggabilly(draggableElem, {
  // 配置项
});

draggie.on('dragEnd', function(e,p) {
  // 回调逻辑
});

编写了自定义函数doOK处理相关逻辑：

function doOK (tLT, wird, fBBB, oBTS, dPs, m_data, innPs, count, HISTORY, HNT_1, HNT_2) { 
  // 大部分业务逻辑
  // 最后执行禁用拖拽
  draggie.disable();
}

尝试通过call方法将draggie绑定到该函数：

let itemOK = doOK.call(draggie, tLT, wird, fBBB, oBTS, dPs, HM, innPs, count, HISTORY, HNT_1, HNT_2);

执行时出现两个错误：

1. 调用draggie.disable()时，报错：Uncaught ReferenceError: draggie is not defined
2. 换成this.disable()时，报错：Uncaught TypeError: this.disable is not a function

需求是固定draggie到指定位置并禁用拖拽，请问问题原因是什么，如何解决？

错误原因 #

1. draggie未定义错误：doOK函数的作用域无法访问到外部定义的draggie变量——如果draggie是在局部作用域（比如某个函数内部）初始化的，而doOK定义在该作用域外，作用域链无法找到这个变量。
2. this.disable不是函数错误：
   • 要么是doOK内部存在嵌套函数（比如异步回调、事件监听），导致嵌套函数里的this丢失了原本绑定的draggie实例；
   • 要么是调用doOK.call(draggie)时，draggie并非有效的Draggabilly实例（比如初始化时draggableElem不存在，导致实例创建失败）。

解决方法 #

方法一：直接将draggie作为参数传入doOK #

这是最稳妥的方式，避免作用域和this绑定的问题：

1. 修改doOK，新增draggie参数：

function doOK(draggie, tLT, wird, fBBB, oBTS, dPs, m_data, innPs, count, HISTORY, HNT_1, HNT_2) { 
  // 原有业务逻辑
  // 固定位置（示例：设置left和top为指定值）
  draggie.setPosition(100, 200);
  // 禁用拖拽
  draggie.disable();
}

2. 调用时直接传入draggie：

let itemOK = doOK(draggie, tLT, wird, fBBB, oBTS, dPs, HM, innPs, count, HISTORY, HNT_1, HNT_2);

方法二：确保this绑定有效（针对无嵌套函数的场景） #

如果坚持用call绑定this，需要保证doOK内部的this始终指向draggie：

1. 若doOK内有嵌套函数，用变量保存this或者使用箭头函数：

function doOK(tLT, wird, fBBB, oBTS, dPs, m_data, innPs, count, HISTORY, HNT_1, HNT_2) { 
  const self = this; // 保存当前this（即draggie实例）
  // 原有业务逻辑
  // 固定位置
  self.setPosition(100, 200);
  // 若有异步操作，用self访问实例
  setTimeout(() => {
    self.disable();
  }, 0);
  // 同步逻辑直接用this
  this.disable();
}

2. 调用时确保call绑定正确：

let itemOK = doOK.call(draggie, tLT, wird, fBBB, oBTS, dPs, HM, innPs, count, HISTORY, HNT_1, HNT_2);

额外检查 #

在调用前可以打印draggie确认是否为有效实例：

console.log(draggie); // 应为Draggabilly实例对象，包含disable、setPosition等方法

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