Question

我已经包含了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>

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

Answer 1

您遇到以下问题之一：

您的jQuery或jQuery UI Javascript路径文件错误
您的jQuery UI不包含可拖动的
您的jQuery或jQuery UI Javascript文件已损坏
你的div没有样式并且空着，因此没有什么可以拖动
某些内容与您的jQuery或jQuery UI发生冲突，因此无效

您的代码是正确的，它应该有效：

http://jsfiddle.net/u7zWA/

Answer 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

Answer 3

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

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

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

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

Answer 4

在我的情况下，我使用的是旧版本的jQuery UI。我用以下内容替换旧引用，一切都按预期开始工作。

cost = nf.parse(tmp[1].trim()).doubleValue();

Answer 5

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

我的建议是添加此代码

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

只有在可拖动对象之后才能确保所有内容都在正确的时间加载。

如果你确定一切正常，那么你就能够重构。

Answer 6

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

.ui-dialog {
    position: fixed;
}

Answer 7

另一个可能的原因是，您已将所有拖动事件从代码中的其他位置转移出来，使用以下内容：

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

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

Answer 8

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

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

Answer 9

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

这已为我修复：我将CSS类重命名为与以前的类不同。

以前的实现：

gridy = 1

新实施：

draggable

可选：您可能需要在实现可拖动之前添加以下代码行

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

jQuery UI Draggable功能不起作用

9 个答案: