jQuery UI Draggable 功能不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7159118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Draggable function is not working
提问by AlexMorley-Finch
I've included the jquery library, afterward the jQuery UI library, and it still doesn't work. I am Using Google Chrome browser.
我已经包含了 jquery 库，然后是 jQuery UI 库，但它仍然不起作用。我正在使用 Google Chrome 浏览器。
code Follows:
代码如下：
<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>
I can't find any solutions anywhere. The debugger says that the method draggable doesn't exist. But I've added jQuery AND jQuery UI, and the paths are correct! it just doesn't work.
我在任何地方都找不到任何解决方案。调试器说该方法 draggable 不存在。但是我添加了 jQuery 和 jQuery UI，并且路径是正确的！它只是不起作用。
回答by Kokos
You have one of these problems:
您有以下问题之一：
- Your jQuery or jQuery UI Javascript path files are wrong
- Your jQuery UI does not include draggable
- Your jQuery or jQuery UI Javascript files are corrupted
- Your div is unstyled and empty, therefore there is nothing to drag
- Something is colliding with your jQuery or jQuery UI so it doesn't work
- 您的 jQuery 或 jQuery UI Javascript 路径文件错误
- 你的 jQuery UI 不包括可拖动的
- 您的 jQuery 或 jQuery UI Javascript 文件已损坏
- 您的 div 没有样式且为空，因此没有什么可拖动的
- 某些东西与您的 jQuery 或 jQuery UI 发生冲突，因此无法正常工作
Your code is correct, and it should work:
你的代码是正确的，它应该可以工作：
回答by Maxooo
Try this :
尝试这个 ：
<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>
You have to implements the draggable component to your project, and include it ! http://jqueryui.com/download
您必须将可拖动组件实现到您的项目中，并包含它！http://jqueryui.com/download
回答by Valamas
My issue was that I had another event bound to mousemove that contained a e.stopPropagation();which prevented the .draggable()mouse code from working.
我的问题是我有另一个绑定到 mousemove 的事件，其中包含一个 e.stopPropagation();阻止.draggable()鼠标代码工作的事件。
$(document).on('mousemove', '*', function (e) { MyFunction(e); });
function MyFunction (sender, e)
{
e.stopPropagation();
...
}
The solution was to remove the e.stopPropagation();and re-evaluate its implementation.
解决方案是删除e.stopPropagation();并重新评估其实施。
回答by Colin
In my case I was using an older version of jQuery UI. I replaced the old reference with the following and everything started working as intended.
就我而言，我使用的是旧版本的 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>
回答by sandeep kumar
I had same issue and i have solve my issue with update the Jquery UIfile.
我有同样的问题，我已经通过更新 Jquery UI文件解决了我的问题。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js" type="text/javascript"></script>
回答by periback2
I fixed it by setting the dialog's position as fixed. It worked like a magic, after hours of stress:
我通过将对话框的位置设置为固定来修复它。经过数小时的压力后，它像魔术一样发挥作用：
.ui-dialog {
position: fixed;
}
回答by Nanki
Another potential reason is that you've turned all drag events off somewhere else in your code, using something like this:
另一个潜在的原因是您在代码的其他地方关闭了所有拖动事件，使用如下所示：
window.ondragstart = function () { return false; };
This will stop the jQuery UI drag event from firing.
这将停止触发 jQuery UI 拖动事件。
回答by Alex Moleiro
Check whether your draggable object is already loaded in the viewport. If it is not, it won't work properly.
检查您的可拖动对象是否已加载到视口中。如果不是，它将无法正常工作。
My advice is to add this code
我的建议是添加此代码
<script type="text/javascript">
$(function() {
$( ".drag" ).draggable({ helper:'clone' });
});
</script>
JUST AFTER the draggable object to be absolutely sure that everything is loaded at the correct time.
就在可拖动对象之后，确保一切都在正确的时间加载。
When you'll be sure everything is ok, then you'll be able to refactor.
当您确定一切正常时，您就可以进行重构。
