blocks|key|5350366|text|嘿，这对我来说很有效(我不能用你正在使用的Google+API链接来运行它)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|5350367|<!DOCTYPE+html+PUBLIC+"-//W3C//DTD+XHTML+1.0+Transitional//EN"+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html+xmlns="http://www.w3.org/1999/xhtml">
<head>
++++<title>Beef+Burrito</title>
++++<script+src="http://code.jquery.com/jquery-1.4.2.min.js"+type="text/javascript"></script>++++
++++<script+src="jquery-ui-1.8.1.custom.min.js"+type="text/javascript"></script>
++++</head>
<body>
++++<div+class="draggable"+style="border:+1px+solid+black;+width:+50px;+height:+50px;+position:+absolute;+top:+0px;+left:+0px;">asdasd</div>

++++<script+type="text/javascript">
++++++++$(".draggable").draggable();
++++</script>
</body>
</html>|code-block|syntax|javascript|5350368|entityMap^0|L|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Hey there, this works for me (I couldn't get this working with the <strong>Google API</strong> links you were using):</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
    &lt;title&gt;Beef Burrito&lt;/title&gt;
    &lt;script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"&gt;&lt;/script&gt;    
    &lt;script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;/head&gt;
&lt;body&gt;
    &lt;div class="draggable" style="border: 1px solid black; width: 50px; height: 50px; position: absolute; top: 0px; left: 0px;"&gt;asdasd&lt;/div&gt;

    &lt;script type="text/javascript"&gt;
        $(".draggable").draggable();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|5350378|text|确保您拥有的是jQuery对象，而不是元素本身。如果选择“按类”，则可能无法获得预期的结果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5350379|打开一个控制台，查看选择器代码返回的内容。在Firebug中，您应该看到类似以下内容：|5350380|jQuery(+div.draggable+)|code-block|syntax|javascript|5350381|您可能需要进入一个数组并获取第一个元素：$('.draggable').first()，然后对该jQuery对象调用draggable()，这样就完成了。|offset|length|style|CODE|5350382|entityMap^0|0|0|0|K|N|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Make sure you have the jQuery object and <em>NOT</em> the element itself.  If you select by class, you may not be getting what you expect.</p>

<p>Open up a console and look at what your selector code returns.  In Firebug, you should see something like:</p>

<pre><code>jQuery( div.draggable )
</code></pre>

<p>You may have to go into an array and grab the first element: <code>$('.draggable').first()</code> Then call draggable() on that jQuery object and you're done.</p>


blocks|key|1529291|text|此代码将不起作用(您可以检查firebug+jQuery.ui未定义)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1529292|<script+src="http://code.jquery.com/jquery-1.4.2.min.js"+type="text/javascript"></script>++++
<script+src="jquery-ui-1.8.1.custom.min.js"+type="text/javascript"></script>
<script+src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"+type="text/javascript"></script>+|code-block|syntax|javascript|1529293|尝试使用以下代码：|1529294|<script+src="http://code.jquery.com/jquery-1.4.2.min.js"+type="text/javascript"></script>++++
<script+src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"+type="text/javascript"></script>+
<script+src="jquery-ui-1.8.1.custom.min.js"+type="text/javascript"></script>|1529295|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>This code will not work (you can check in firebug jQuery.ui is undefined):</p>

<pre><code>&lt;script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"&gt;&lt;/script&gt;    
&lt;script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; 
</code></pre>

<p>Try use follow code:</p>

<pre><code>&lt;script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"&gt;&lt;/script&gt;    
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; 
&lt;script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
</code></pre>


blocks|key|1533526|text|问题发布4年后，但它可能会帮助其他遇到这个问题的人。答案也发布在StackExchange上的其他地方，但我丢失了链接，很难找到。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533527|答:在jQueryTOOLS中，如果你使用默认下载，jQuery‘核心’也是嵌入的。|1533528|当你加载jQuery和jQuery工具时，jQuery核心被定义了两次，并将“取消设置”任何插件。‘'Draggable’(来自jQuery-UI)就是这样一个插件。|1533529|解决方案是在没有jQuery“核心”文件的情况下使用jQuery工具，一切都会正常工作。|1533530|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>4 years after the question got posted, but maybe it will help others who run into this problem. The answer has been posted elsewhere on StackExchange as well, but I lost the link and it's hard to find.</p>

<p>ANSWER: In jQueryTOOLS, the jQuery 'core' is also embedded if you use the default download. </p>

<p>When you load jQuery and jQuery tools, jQuery core gets defined twice and will 'unset' any plugins. 'Draggable' (from jQuery-UI) is such a plug-in.</p>

<p>The solution is to use jQuery tools WITHOUT the jQuery 'core' files and everything will work fine.</p>


blocks|key|5350451|text|这可能会对某些人有所帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5350452|在我的例子中，我可以通过首先加载draggable所依赖的js文件来消除这个错误。它们是ui.mouse.js、ui.core和ui.widget，即UI核心小部件工厂鼠标交互|5350453|确保用于加载依赖项的脚本标记位于可拖动的js加载标记之上。|5350454|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>This may be helpful for some one :</p>

<p>In my case i was able to remove this error by first loading the js files on which draggable depends. They were ui.mouse.js, ui.core and ui.widget
i.e
    UI Core
    Widget Factory
    Mouse Interaction</p>

<p>Make sure the script tag for loading dependencies lies above the draggable js loading tag.</p>


blocks|key|5350468|text|jQuery工具和jQuery+UI会发生冲突，因为它们都声明为jQuery.tabs，而冲突会阻止加载第二个工具(在本例中为jQuery+UI)。这就是你得到一个draggable+is+not+a+function错误的原因。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5350469|此问题的一个解决方案是创建一个自定义版本的jQuery工具(来自here)，但不包含选项卡功能。|5350470|有关冲突的信息可在此处找到：Can+JQuery+UI+and+JQuery+tools+work+together?|5350471|entityMap|0|LINK|mutability|MUTABLE|url|http://jquerytools.org/download/|1|https://stackoverflow.com/questions/1374720/can-jquery-ui-and-jquery-tools-work-together#1721944^0|W|B|2A|R|0|W|4|0|0|E|19|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|H|3|I|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|J|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]]]

<p>jQuery Tools and jQuery UI get in conflict because they both declare <code>jQuery.tabs</code> and the conflict prevents the second one (in this case jQuery UI) from being loaded. This is the reason why you get a <code>draggable is not a function</code> error.</p>

<p>A solution to this problem is to create a custom version of jQuery Tools (from <a href="http://jquerytools.org/download/" rel="nofollow noreferrer">here</a>) without the tabs functionality.</p>

<p>Informations about the conflict found here: <a href="https://stackoverflow.com/questions/1374720/can-jquery-ui-and-jquery-tools-work-together#1721944">Can JQuery UI and JQuery tools work together?</a></p>


blocks|key|3932916|text|发生这种情况的一个常见原因是在加载jquery之后没有加载jqueryui。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3932917|例如：|3932918|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"+type="text/javascript"></script>
<script+src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"+type="text/javascript"></script>|code-block|syntax|javascript|3932919|编辑。将每个库的版本号替换为jquery和jqueryui的适当值或最新值。|offset|length|3932920|如果这不能解决问题，请查看许多其他答案中的建议。|3932921|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/speed/libraries/#jquery|1|https://developers.google.com/speed/libraries/#jquery-ui^0|0|0|0|E|6|0|L|8|1|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@$K|12|L|13|1|14]|$K|15|L|16|1|17]]|A|$]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

<p>A common reason occurs is if you don't also load jqueryui after loading jquery.</p>

<p>For example:</p>

<pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
</code></pre>

<p><em>EDIT.</em>
Replace the version number for each library with appropriate or latest values for <a href="https://developers.google.com/speed/libraries/#jquery" rel="noreferrer">jquery</a> and <a href="https://developers.google.com/speed/libraries/#jquery-ui" rel="noreferrer">jqueryui</a>.</p>

<p>If this doesn't solve the issue, review suggestions in the many other answers.</p>


blocks|key|1822823|text|而不是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1822824|<script+src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"+type="text/javascript"></script>++++
<script+src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>|code-block|syntax|javascript|1822825|使用|1822826|++<script+src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>++
++<script+src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"+type="text/javascript"></script>|1822827|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Instead of</p>

<pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;    
&lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"&gt;&lt;/script&gt;
</code></pre>

<p>Use</p>

<pre><code>  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
</code></pre>


blocks|key|1533588|text|您可以导入这些js文件。它对我来说工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533589|<script+type="text/javascript"+src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>++
<script+type="text/javascript"+src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"+></script>|code-block|syntax|javascript|1533590|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can import these js Files. It worked fine for me.</p>

<pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;  
&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" &gt;&lt;/script&gt;
</code></pre>


blocks|key|3932942|text|如果包含两次普通的jquery库，也可能导致此问题。我在我的身体和头脑中有两次下面的代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3932943|在我尝试使用jquery+UI之前，它从未引起任何问题。|3932944|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>This issue can also be caused if you include the normal jquery library twice. I had the following line twice, in my body and head.</p>



<p>It never caused any problems until I tried to use jquery UI as well.</p>


blocks|key|1529406|text|导致此错误的原因通常是因为您可能正在使用引导程序框架，并且已经在其他位置包含了jquery文件，该文件可能位于关闭body标记的头部或正上方，在这种情况下，您所需要做的就是在您拥有jquery文件的任何位置或在这两个位置都包含jquery+ui文件，这样就可以了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1529407|++<script+src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"+type="text/javascript"></script>|code-block|syntax|javascript|1529408|在导入jquery文件和其他引导依赖项时，只要包含上面的jquery+ui脚本即可。|1529409|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>The cause to this error is usually because you're probably using a bootstrap framework and have already included a jquery file somewhere else may at the head or right above the closing body tag, in that case all you need to do is to include the jquery ui file wherever you have the jquery file or on both both places and you'll be fine...</p>

<pre><code>  &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
</code></pre>

<p>just include the above jquery ui script wherever you are importing the jquery file along with other bootstrap dependencies.</p>


blocks|key|1822930|text|确保你的代码遵循这个顺序-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1822931|​|1822932|<script+src="jquery.min.js"></script>
<script+src="jquery-ui/jquery-ui.js"></script>|code-block|syntax|javascript|1822933|1822934|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Make sure your code follows this order-</p>



<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script src="jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="jquery-ui/jquery-ui.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>




blocks|key|5350663|text|由于另一个原因，我也遇到了同样的问题，我的眼睛需要一个小时才能找到答案。我复制粘贴了加载jquery的脚本标记：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5350664|<script+src="**https**://code.jquery.com/jquery-3.2.1.min.js"></script>
<script+src="**http**://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>|code-block|syntax|javascript|5350665|我的网站在从移动浏览器访问时使用https，并且在没有https的情况下拒绝加载jquery-ui。|5350666|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I had the same problem for another reason and my eye needed one hour to find out.
I had copy-pasted the script tags that load jquery :</p>

<pre><code>&lt;script src="**https**://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
&lt;script src="**http**://code.jquery.com/ui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
</code></pre>

<p>My website was using https when accessed from a mobile browser and refused to load jquery-ui without https.</p>


blocks|key|3933113|text|如果您正在开发离子应用程序，请确保在ionic.bundle.js之前包含jquery和jquery-ui！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3933114|为这么微不足道的事情浪费时间：|3933115|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>If you are developing an Ionic app be sure to include jquery and jquery-ui before ionic.bundle.js!</p>

<p>such a waste of time for something so trivial  :(</p>


blocks|key|1533692|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533693|Install+jquery-ui-dist|ordered-list-item|offset|length|1533694|1533695|使用npm|1533696|npm+install+--save+jquery-ui-dist|style|CODE|1533697|或yarn|1533698|在你的应用程序代码中yarn+add+jquery-ui-dist|1533699|Import它|unordered-list-item|1533700|1533701|import+'jquery-ui-dist/jquery-ui';|1533702|或|1533703|require('jquery-ui-dist/jquery-ui');|1533704|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/jquery-ui-dist|1|https://www.npmjs.com/|2|https://yarnpkg.com/en/^0|0|8|E|0|0|0|2|3|1|0|0|X|0|1|4|2|0|A|N|0|0|0|0|Y|0|0|0|10|0^^$0|@$1|2|3|-4|4|5|6|1C|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|1D|7|@]|8|@$D|1E|E|1F|1|1G]]|9|$]]|$1|F|3|-4|4|5|6|1H|7|@]|8|@]|9|$]]|$1|G|3|H|4|5|6|1I|7|@]|8|@$D|1J|E|1K|1|1L]]|9|$]]|$1|I|3|J|4|5|6|1M|7|@$D|1N|E|1O|K|L]]|8|@]|9|$]]|$1|M|3|N|4|5|6|1P|7|@]|8|@$D|1Q|E|1R|1|1S]]|9|$]]|$1|O|3|P|4|5|6|1T|7|@$D|1U|E|1V|K|L]]|8|@]|9|$]]|$1|Q|3|R|4|S|6|1W|7|@]|8|@]|9|$]]|$1|T|3|-4|4|5|6|1X|7|@]|8|@]|9|$]]|$1|U|3|V|4|5|6|1Y|7|@$D|1Z|E|20|K|L]]|8|@]|9|$]]|$1|W|3|X|4|5|6|21|7|@]|8|@]|9|$]]|$1|Y|3|Z|4|5|6|22|7|@$D|23|E|24|K|L]]|8|@]|9|$]]|$1|10|3|-4|4|5|6|25|7|@]|8|@]|9|$]]]|11|$12|$4|13|14|15|9|$16|17]]|18|$4|13|14|15|9|$16|19]]|1A|$4|13|14|15|9|$16|1B]]]]

<ol>
<li><p>Install <a href="https://www.npmjs.com/package/jquery-ui-dist" rel="noreferrer">jquery-ui-dist</a></p>

<p>use <a href="https://www.npmjs.com/" rel="noreferrer">npm</a></p>

<p><code>npm install --save jquery-ui-dist</code></p>

<p>or <a href="https://yarnpkg.com/en/" rel="noreferrer">yarn</a></p>

<p><code>yarn add jquery-ui-dist</code></p></li>
<li><p>Import it inside your app code</p>

<p><code>import 'jquery-ui-dist/jquery-ui';</code></p>

<p>or</p>

<p><code>require('jquery-ui-dist/jquery-ui');</code></p></li>
</ol>


blocks|key|1823081|text|我看过了你的问题和另一个duplicate。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1823082|最后，下面的回答帮助我理清了思路：|1823083|uncaught-typeerror-draggable-is-not-a-function|1823084|摆脱：|1823085|1823086|+$(".draggable").draggable不再是一个函数|blockquote|1823087|1823088|1823089|我不得不将指向Javascript库的链接放在我期望工作的脚本标记之上。|style|BOLD|1823090|我的代码：|1823091|<link+rel="stylesheet"+href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css"/>
<script+type="text/javascript"+src="https://code.jquery.com/jquery-1.12.4.min.js"+/>
<script+type="text/javascript"+src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"+/>

<script>
++++$(function(){
++++++++$("#container-speed").draggable();
++++});
</script>

<div+class="content">
++++<div+class="container-fluid">
++++++++<div+class="row">
++++++++++++<div+class="rowbackground"style="width:+600px;+height:+400px;+margin:+0+auto">
++++++++++++++++<div+id="container-speed"+style="width:+300px;+height:+200px;+float:+left"></div>
++++++++++++++++<div+id="container-rpm"+style="width:+300px;+height:+200px;+float:+left"></div>
++++++++++++</div>
++++++++</div>
++++</div>
</div>|code-block|syntax|javascript|1823092|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/32219513/uncaught-typeerror-draggable-is-not-a-function|1|https://stackoverflow.com/questions/32219513/uncaught-typeerror-draggable-is-not-a-function/40155874#40155874^0|C|9|0|0|0|0|1A|1|0|0|0|0|0|0|L|C|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|D|3|E|5|6|7|1E|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1F|8|@]|9|@$A|1G|B|1H|1|1I]]|C|$]]|$1|H|3|I|5|6|7|1J|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|1K|8|@]|9|@]|C|$]]|$1|K|3|L|5|M|7|1L|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|1M|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1N|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|1O|8|@$A|1P|B|1Q|R|S]]|9|@]|C|$]]|$1|T|3|U|5|6|7|1R|8|@]|9|@]|C|$]]|$1|V|3|W|5|X|7|1S|8|@]|9|@]|C|$Y|Z]]|$1|10|3|-4|5|6|7|1T|8|@]|9|@]|C|$]]]|11|$12|$5|13|14|15|C|$16|17]]|18|$5|13|14|15|C|$16|19]]]]

<p>I went through both your question and a another <a href="https://stackoverflow.com/questions/32219513/uncaught-typeerror-draggable-is-not-a-function">duplicate</a>.<br>
In the end, the following answer helped me sorting things out:<br>
<a href="https://stackoverflow.com/questions/32219513/uncaught-typeerror-draggable-is-not-a-function/40155874#40155874">uncaught-typeerror-draggable-is-not-a-function</a> </p>

<p>To get rid of :  </p>

<blockquote>
  <p>$(".draggable").draggable is not a function anymore</p>
</blockquote>

<p>I had to <strong>put links to Javascript libraries above the script tag</strong> I expected to be working.</p>

<p>My code:</p>

<pre><code>&lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css"/&gt;
&lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" /&gt;
&lt;script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" /&gt;

&lt;script&gt;
    $(function(){
        $("#container-speed").draggable();
    });
&lt;/script&gt;

&lt;div class="content"&gt;
    &lt;div class="container-fluid"&gt;
        &lt;div class="row"&gt;
            &lt;div class="rowbackground"style="width: 600px; height: 400px; margin: 0 auto"&gt;
                &lt;div id="container-speed" style="width: 300px; height: 200px; float: left"&gt;&lt;/div&gt;
                &lt;div id="container-rpm" style="width: 300px; height: 200px; float: left"&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|1529595|text|我在jqueryui页面的底部发现了这个垃圾，它是通过chromes调试器(网络部分)在同一文件顶部的jquery+/jqueryui节之后加载_layout+1.10.2找到的。当我删除所有这些时，.sortable和.draggable开始工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1529596|@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts",+required:+false)|code-block|syntax|javascript|1529597|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I had this junk at the bottom of my _layout mvc page that I found via chromes debugger (network section) loading jquery 1.10.2 after the jquery / jqueryui sections at the top of the same file. When I removed all that .sortable and .draggable started working.</p>
<pre><code>@Scripts.Render(&quot;~/bundles/jquery&quot;)
@Scripts.Render(&quot;~/bundles/bootstrap&quot;)
@RenderSection(&quot;scripts&quot;, required: false)
</code></pre>


<p>I've trying to use the draggable effect on some divs on a page, but whenever I load the page, I get the error message:</p>

<pre><code>Error: $(".draggable").draggable is not a function
</code></pre>

<p>I've had a look around it seemed other people were having this problem as they had not included the jQuery UI javascript file, but I definitely have.</p>

<p>The following is within the head tag of my page:</p>

<pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;    
&lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"&gt;&lt;/script&gt;
</code></pre>

<p>Can anyone suggest a solution?</p>

<p>Any advice appreciated.</p>

<p>Thanks.</p>

<p>Quick edit, I also have the jquery tools js included in the head of the page, if I remove this it works OK.  Has anyone managed to get these two working together?</p>


jQuery UI - Draggable is not a function?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我尝试在页面上的一些div上使用可拖动效果，但无论何时加载页面，我都会收到错误消息：Error: $(".draggable").draggable is not a function我到处看了看，似乎其他人也有这个问题，因为他们没有包含jQuery UI javascript文件，但我肯定有。下面是我的页面的head...

问jQuery UI - Draggable不是函数吗？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery UI - Draggable不是函数吗？EN