jQuery UI 可拖动功能不起作用答案

【问题标题】：jQuery UI Draggable function is not workingjQuery UI 可拖动功能不起作用
【发布时间】：2011-08-23 09:47:51
【问题描述】：

我已经包含了 jquery 库，然后是 jQuery UI 库，但它仍然无法工作。我正在使用 Google Chrome 浏览器。

代码如下：

<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js" type="type/javascript"></script>
<script type="text/javascript">
    $(function() {
        $( ".drag" ).draggable();
    });
</script>

<div id="aboutBox" class="boxLook boxBg drag"></div>

我在任何地方都找不到任何解决方案。调试器说方法draggable 不存在。但是我添加了 jQuery 和 jQuery UI，并且路径是正确的！它只是不起作用。

【问题讨论】：

你使用的jquery ui js文件，是否包含可拖动模块？尝试从他们的网站重新创建您的 jquery ui 文件，并确保包含 draggable。
我打开 jquery ui JS 文件并搜索 draggable 并且它存在，我还在 about 框中添加了 ui-draggable。还是什么都没有

标签： jquery jquery-ui jquery-ui-draggable

【解决方案1】：

您遇到以下问题之一：

您的 jQuery 或 jQuery UI Javascript 路径文件错误
您的 jQuery UI 不包括可拖动的
您的 jQuery 或 jQuery UI Javascript 文件已损坏
您的 div 没有样式且为空，因此没有可拖动的内容
某些东西与您的 jQuery 或 jQuery UI 发生冲突，因此无法正常工作

您的代码是正确的，它应该可以工作：

http://jsfiddle.net/u7zWA/

【讨论】：

好吧，奇怪的是我让它工作了。而不是通过我的项目添加脚本，而是从“ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js”获取代码并且它有效！耶！但现在我有另一个问题，我可以拖动 Div。但是当我释放 div 时，它会返回到原来的位置：s
draggable({ revert: false })，如果我的回答对你有帮助，请点赞并接受:)
6.你在 jquery 之前加载你的 ui 脚本

【解决方案2】：

试试这个：

<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js" type="type/javascript"></script>
<script src="js/ui/jquery.ui.draggable.js" type="type/javascript"></script>
<script type="text/javascript">
    $(function() {
        $( ".drag" ).draggable();
    });
</script>

<div id="aboutBox" class="boxLook boxBg drag"></div>

你必须在你的项目中实现可拖动组件，并包含它！ http://jqueryui.com/download

【讨论】：

它可能包含在js/jquery-ui-1.8.16.custom.min.js 中。 “custom”是用于表示 jQuery UI 库的自定义构建的后缀。

【解决方案3】：

我的问题是我有另一个绑定到 mousemove 的事件，其中包含一个 e.stopPropagation();，这阻止了 .draggable() 鼠标代码的工作。

$(document).on('mousemove', '*', function (e) { MyFunction(e); });

function MyFunction (sender, e)
{
    e.stopPropagation();
    ...
}

解决方案是删除e.stopPropagation(); 并重新评估其实现。

【讨论】：

控制台输出：“未捕获的类型错误：无法读取未定义的属性 'stopPropagation'”。你能指出一个原因吗？
检查你是否通过函数树传递e
谢谢兄弟。我花了 6 个小时试图找出问题所在。原来我在同一个视图中加载的两个 .js 文件之间存在差异。

【解决方案4】：

我通过将对话框的位置设置为固定来修复它。经过数小时的压力，它就像魔术一样工作：

.ui-dialog {
    position: fixed;
}

【讨论】：

【解决方案5】：

就我而言，我使用的是旧版本的 jQuery UI。我用以下内容替换了旧参考，一切都开始按预期工作。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

【讨论】：

【解决方案6】：

检查您的可拖动对象是否已加载到视口中。如果不是，它将无法正常工作。

我的建议是添加此代码

<script type="text/javascript">             
$(function() {                         
    $( ".drag" ).draggable({ helper:'clone' });
});
 </script>

就在可拖动对象之后，以绝对确保所有内容都在正确的时间加载。

当你确定一切正常时，你就可以重构了。

【讨论】：

【解决方案7】：

另一个潜在的原因是您在代码的其他地方关闭了所有拖动事件，使用如下：

window.ondragstart = function () { return false; };

这将停止触发 jQuery UI 拖动事件。

【讨论】：

【解决方案8】：

我遇到了同样的问题，我已经通过 更新 Jquery UI 文件解决了我的问题。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js" type="text/javascript"></script>

【讨论】：

【解决方案9】：

我在代码库中有另一个使用 draggable 的文件，然后我只想重用类名。

这为我解决了这个问题：我将 CSS 类重命名为与前一个不同。

以前的实施：

  $(".old_css_class_name").unbind("droppable");
    $(".old_css_class_name").draggable({
        helper: "clone",
        cursor: "move",
        connectToSortable: ".css_name_to_sortable_implementation" //optional
    });

新实施：

$(".new_css_class_name").unbind("droppable");
    $(".new_css_class_name").draggable({
        helper: "clone",
        cursor: "move",
        connectToSortable: ".new_name_to_sortable_implementation" //optional
    });

可选：您可能希望在实现可拖动之前添加这行代码

$(".the_new_css_class_name").unbind("droppable");

【讨论】：