页面引入不同版本jQuery CDN链接导致功能失效的技术求助

嘿，我一眼就揪出问题根源了——你重复引入了两次完全一样的jQuery库！这就是拖拽功能罢工的罪魁祸首。

为什么会出问题？ #

当你加载第二次jQuery的时候，它会完全覆盖第一次加载的jQuery实例。而你之后加载的jQuery UI是绑定在第一次加载的jQuery上的，第二次加载的全新jQuery实例并没有包含jQuery UI的draggable方法。所以当你的代码调用$(...).draggable()时，根本找不到对应的方法，自然就无法正常工作了。

修复步骤 #

1. 删除重复的jQuery引入：只保留一个jQuery CDN链接就行，比如删掉第二个重复的<script>标签。
2. 保持正确的加载顺序：确保jQuery UI始终在jQuery之后加载（你当前的顺序是对的，继续保持就好）。

修复后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#box,#box1,#box2').draggable({
      stack: "div",
      distance: 0
    });
  });
</script>

小提示 #

不光是相同版本，不同版本的jQuery重复引入也会导致各种奇怪的冲突——后面加载的版本会覆盖前面的，依赖旧版本API的插件可能直接失效。所以记住：页面里永远只保留一个jQuery引入，所有依赖jQuery的插件都要放在它之后加载。

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