Jquery UI Draggable 不起作用 - 添加了 ui-draggable 但没有拖动事件答案

【问题标题】：Jquery UI Draggable not working - ui-draggable added but no drag eventJquery UI Draggable 不起作用 - 添加了 ui-draggable 但没有拖动事件
【发布时间】：2023-03-12 15:55:01
【问题描述】：

我正在使用

$('.swipeenabled').draggable({ axis: "x"})

用于获得 x-draggable 功能。

我的js文件顺序如下：

<script type="text/javascript" src="{% static "crsq/js/zippednewsapp/jquery-1.10.2.js" %}"></script>
<script type="text/javascript" src="{% static "crsq/js/zippednewsapp/bootstrap.js" %}"></script>
<script type="text/javascript" src="{% static "crsq/js/zippednewsapp/jail.js" %}"></script>
<script type="text/javascript" src="{% static "crsq/js/zippednewsapp/jquery-ui.js" %}"></script>
<script type="text/javascript" src="{% static "crsq/js/zippednewsapp/jquery.touchSwipe.min.js" %}"></script>

我们知道 draggable 正在工作，因为 ui-draggable 类被添加到元素 .swipeenabled 中

但是，拖动功能不起作用。可能的原因有哪些？ jquery 和 jquery-ui js 文件没有损坏。我已经检查过了。

【问题讨论】：

我猜 jquery 文件及其顺序有些问题
您是否尝试过仅使用所需的 javascript 创建准系统示例？如果精简的示例有效，您可能会与其他脚本发生冲突。
一个简单的演示在这里工作：jsfiddle.net/GSpdW/1;你能提供更多的上下文吗？你的 HTML 代码？控制台和网络有什么错误吗？
当我删除其他js文件时，它仍然不起作用。所以，不存在冲突的问题。顺序是jquery，然后是jquery-ui。所以，这也应该没问题。还有什么问题？
当我使用 google cdn jquery 和 jquery-ui 库时。依然没有。没有错误。它肯定会被执行，因为添加了 ui-draggable 类

标签： jquery jquery-ui jquery-draggable

【解决方案1】：

你需要在 jQuery UI 之前加载 jQuery 库：

例如下面的代码可以工作：-

<script type="text/javascript" src="Javascript/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Javascript/jquery-ui-1.10.2.custom.min.js"></script>     
<script type="text/javascript">
  $(function() {
   $('.swipeenabled').draggable({ axis: "x"})       });
</script>
<body>
  <div class="swipeenabled">
    <p>Drag me around</p>
  </div>

演示：-

http://jsfiddle.net/u7zWA/395/

【讨论】：

从提供的代码看来是之前加载的
stackoverflow.com/questions/13940421/… 是解决方案。