Alfresco Surf页面集成Dragula报错：dragula未定义问题咨询

我来帮你捋捋这个dragula is not defined错误的根源和解决办法：

为什么会报错？ #

核心问题是Dojo的AMD加载机制和dragula的暴露方式不匹配：

• Dragula默认是作为全局变量（挂载在window.dragula上）发布的，并没有遵循AMD模块规范（也就是没有用define()来定义模块）。
• 而Dojo的require()函数在加载这类非AMD模块时，不会自动把全局变量注入到你的回调函数里。你当前的回调函数没有接收任何参数，自然找不到dragula这个变量。

可行的解决方法 #

不需要更换dragula库，调整加载使用方式就能解决，这里有几种靠谱的方案：

方案1：直接使用全局变量（最简单快速） #

既然dragula已经被加载到全局作用域了，你可以直接在回调里调用全局的dragula：

require(["${page.url.context}/res/components/js/dragula.js"], function(){
  // 直接调用全局的dragula
  dragula([document.getElementById('left-defaults')]);
  // 也可以明确写window.dragula，避免潜在的变量冲突
  // window.dragula([document.getElementById('left-defaults')]);
});

这种方式适合快速验证，但如果页面有其他代码可能覆盖全局dragula，会有风险。

方案2：用Dojo的dojo/global安全获取全局变量 #

为了更规范地访问全局对象，可以引入Dojo自带的dojo/global模块：

require([
  "${page.url.context}/res/components/js/dragula.js",
  "dojo/global"
], function(_, global){
  // 通过global对象获取dragula
  global.dragula([document.getElementById('left-defaults')]);
});

这里第一个参数_是占位用的（因为dragula不是AMD模块，Dojo不会返回它），我们通过dojo/global来安全拿到全局的dragula。

方案3：配置Dojo Shim（最规范，适合长期使用） #

如果你的项目需要多次用到dragula，推荐配置Dojo的shim，让Dojo识别这个非AMD模块，之后就能像加载普通AMD模块一样使用它：

1. 先在页面的Dojo配置脚本里添加shim和路径映射：

dojoConfig = {
  paths: {
    // 把dragula的路径映射到你的文件位置
    "dragula": "${page.url.context}/res/components/js/dragula"
  },
  shim: {
    "dragula": {
      // 指定dragula暴露的全局变量名
      exports: "dragula"
      // 如果dragula有依赖（比如jQuery，不过dragula本身不依赖），可以写在这里：deps: []
    }
  }
};

2. 之后就可以正常用require加载并接收dragula参数了：

require(["dragula"], function(dragula){
  dragula([document.getElementById('left-defaults')]);
});

这种方式最符合Dojo的模块规范，能避免全局变量污染，适合长期维护的项目。

内容的提问来源于stack exchange，提问作者Adrián Álvarez