jQuery UI 可拖动不是函数错误答案

【问题标题】：jQuery UI draggable is not a function ErrorjQuery UI 可拖动不是函数错误
【发布时间】：2012-12-01 21:54:23
【问题描述】：

好的，我不断收到错误消息，无法拖动任何 div...

错误信息如下：

未捕获的异常：TypeError： '$(".polaroidpolaroid_attachments_mod_25").draggable' 不是在 ($) 中的第 343 行第 4 列抛出函数错误在http://developers.dream-portal.net/test/index.php: $(".polaroidpolaroid_attachments_mod_25").draggable({ 通过 Function.prototype.apply() 从第 2 行调用 (t) 中的第 33900 列 http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js: if(a[u].apply(t[0],t[1])===!1&&e.stopOnFalse) 从 () 中的第 2 行第 34244 列调用 http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js: (函数 r(t){v.each(t,function(t,n){var i=v.type(n);i==="function"?(!e.unique||!c.has( n))&&a.push(n):n&&n.length&&i!=="string"&&r(n)})})(参数),i?o=a.length:n&&(s=t,l(n)) 从 (e) 中的第 2 行第 22488 列调用 http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js: return v.ready.promise().done(e)，这从第 276 行调用，第 3 列在 startPolaroids() 中 http://developers.dream-portal.net/test/index.php: jQuery(document).ready(function($){ 从第 1322 行调用，第 5 列 in () in http://developers.dream-portal.net/test/Themes/default/scripts/script.js?fin20: aOnloadEventsi;

我正在使用一个外部 js 文件，该文件通过以下功能加载到网页的头部：

var aOnloadEvents = new Array();
function addLoadEvent(fNewOnload)
{
    // If there's no event set, just set this one
    if (typeof(fNewOnload) == 'function' && (!('onload' in window) || typeof(window.onload) != 'function'))
        window.onload = fNewOnload;

    // If there's just one event, setup the array.
    else if (aOnloadEvents.length == 0)
    {
        aOnloadEvents[0] = window.onload;
        aOnloadEvents[1] = fNewOnload;
        window.onload = function() {
            for (var i = 0, n = aOnloadEvents.length; i < n; i++)
            {
                if (typeof(aOnloadEvents[i]) == 'function')
                    aOnloadEvents[i]();
                else if (typeof(aOnloadEvents[i]) == 'string')
                    eval(aOnloadEvents[i]);
            }
        }
    }

    // This isn't the first event function, add it to the list.
    else
        aOnloadEvents[aOnloadEvents.length] = fNewOnload;
}

在网页正文中（这是我可以从运行它的脚本中访问的所有内容），我有以下用 PHP 编写的代码（所以请原谅引号的转义）：

// Only want to load up jQuery 1 time here!
if(!window.jQuery)
{
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.async = true;
   script.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
   var oScripts = document.getElementsByTagName("script");
   var s = oScripts[0];
   s.parentNode.insertBefore(script, s);
}

if(!jQuery.ui)
{
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.async = true;
   script.src = "//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js";
   var oScripts = document.getElementsByTagName("script");
   var s = oScripts[0];
   s.parentNode.insertBefore(script, s);
}

function randomNum_polaroid_attachments_mod_25(minVal, maxVal)
{
    var randVal = minVal + (Math.random() * (maxVal - minVal + 1));
    return Math.round(randVal);
}

function startPolaroids()
{
    jQuery(document).ready(function($){
        // Set up default values.
        var offsetStartX = 0;
        var offsetEndX = $(document).width() - $(".polaroidpolaroid_attachments_mod_25").width();
        var offsetStartY = 0;
        var offsetEndY = $(document).height() - $(".polaroidpolaroid_attachments_mod_25").height();
        var objContain = 'document';
            var objEle = document.getElementById("placeholder");
            if (objEle)
            {

                var getObjOffset = $("#placeholder").position();

                offsetStartX = getObjOffset.left;
                offsetEndX = (offsetStartX + $("#placeholder").outerWidth(true)) - $(".polaroidpolaroid_attachments_mod_25").width();
                offsetStartY = getObjOffset.top;
                offsetEndY = (offsetStartY + $("#placeholder").outerHeight(true)) - $(".polaroidpolaroid_attachments_mod_25").height();

                if (offsetEndY < offsetStartY)
                    offsetEndY = offsetStartY + 1;

                if (offsetEndX < offsetStartX)
                    offsetEndX = offsetStartX + 1;
                objContain = '#placeholder';
            }

        // When everything has loaded, place all polaroids on a random position relative to document or element id!
        $(".polaroidpolaroid_attachments_mod_25").each(function (i) {
            var tempVal = Math.round(Math.random());
            if(tempVal == 1) {
                var rotDegrees = randomNum_polaroid_attachments_mod_25(330, 360); // rotate left
            } else {
                var rotDegrees = randomNum_polaroid_attachments_mod_25(0, 30); // rotate right
            }

            var cssObj = { 'left' : randomNum_polaroid_attachments_mod_25(offsetStartX, offsetEndX),
                'top' : randomNum_polaroid_attachments_mod_25(offsetStartY, offsetEndY),
                msTransform: 'rotate('+ rotDegrees + 'deg)', // IE 9
                '-moz-transform' : 'rotate('+ rotDegrees + 'deg)',  // Firefox
                '-webkit-transform' : 'rotate('+ rotDegrees + 'deg)',  // Safari & Chrome
                '-o-transform' : 'rotate('+ rotDegrees + 'deg)', // Opera
                'transform' : 'rotate\('+ rotDegrees + 'deg)' }; // added in case CSS3 is standard
            $(this).css(cssObj);
        });

        // Set the Z-Index (used to display images on top while dragging)
        var zindexnr = 1;

        // boolean to check if the user is dragging
        var dragging = false;

        // Show the polaroid on top when clicked on
        $(".polaroidpolaroid_attachments_mod_25").mouseup(function(e){
            if(!dragging) {
                // Bring polaroid to the foreground
                zindexnr++;
                var cssObj = { 'z-index' : zindexnr,
                'transform' : 'rotate(0deg)',           // added in case CSS3 is standard
                '-webkit-transform' : 'rotate(0deg)',   // Chrome and Safari
                msTransform: 'rotate(0deg)', // IE 9
                '-moz-transform' : 'rotate(0deg)',      // Firefox
                '-o-transform' : 'rotate(0deg)' };      // Opera
                $(this).css(cssObj);
            }
        });

        // Make the polaroid draggable & display a shadow when dragging
        $(".polaroidpolaroid_attachments_mod_25").draggable({
            cursor: 'pointer',
            containment: objContain,
            start: function(event, ui) {
                dragging = true;
                zindexnr++;
                var cssObj = { 'box-shadow' : '#888 5px 10px 10px', // added in case CSS3 is standard
                    '-ms-box-shadow' : '#888 5px 10px 10px', // IE 9
                    '-o-box-shadow' : '#888 5px 10px 10px',  // Opera
                    '-moz-box-shadow' : '#888 5px 10px 10px', // firefox 3.5 - 4.0
                    '-webkit-box-shadow' : '#888 5px 10px 10px', // Chrome & Safari
                    'margin-left' : '-10px',
                    'margin-top' : '-10px',
                    'z-index' : zindexnr };
                $(this).css(cssObj);
            },
            stop: function(event, ui) {
                var tempVal = Math.round(Math.random());
                if(tempVal == 1) {
                    var rotDegrees = randomNum_polaroid_attachments_mod_25(330, 360); // rotate left
                } else {
                    var rotDegrees = randomNum_polaroid_attachments_mod_25(0, 30); // rotate right
                }
                var cssObj = { 'box-shadow' : '', // added in case CSS3 is standard
                    '-ms-box-shadow' : '', // IE 9
                    '-o-box-shadow' : '',  // Opera
                    '-moz-box-shadow' : '', // firefox 3.5 - 4.0
                    '-webkit-box-shadow' : '', // Chrome & Safari
                    'transform' : 'rotate('+ rotDegrees + 'deg)', // added in case CSS3 is standard
                    '-webkit-transform' : 'rotate('+ rotDegrees + 'deg)', // Chrome & Safari
                    msTransform: 'rotate('+ rotDegrees + 'deg)', // IE 9
                    '-moz-transform' : 'rotate('+ rotDegrees + 'deg)',  // Firefox
                    '-o-transform' : 'rotate('+ rotDegrees + 'deg)', // Opera
                    'margin-left' : '0px',
                    'margin-top' : '0px' };
                $(this).css(cssObj);
                dragging = false;
            }
        });
    })
}
        // Calling SMF js function, defined in script.js, here.
        addLoadEvent(startPolaroids);

我无法拖动 div，它们确实存在于 HTML 中。我在上面遇到了这个错误，所以，试图在这里查明确切的问题，可以用另一双眼睛来解决这个问题。

如果有帮助，这里还有一个指向实际页面的链接：http://developers.dream-portal.net/test/index.php

谢谢大家:)

所以，如果我改变这个：

// Only want to load up jQuery 1 time here!
if(!window.jQuery)
{
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.async = true;
   script.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
   var oScripts = document.getElementsByTagName("script");
   var s = oScripts[0];
   s.parentNode.insertBefore(script, s);
}

if(!jQuery.ui)
{
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.async = true;
   script.src = "//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js";
   var oScripts = document.getElementsByTagName("script");
   var s = oScripts[0];
   s.parentNode.insertBefore(script, s);
}

到这里：

if(!window.jQuery)
{
   var script = document.createElement("script");
   var uiScript = document.createElement("script");
   script.type = "text/javascript";
   uiScript.type = "text/javascript";
   script.async = false;
   uiScript.async = false;
   script.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
   uiScript.src = "//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js";
   var oScripts = document.getElementsByTagName("script");
   var s = oScripts[0];

   s.parentNode.insertBefore(script, s);
   s.parentNode.insertBefore(uiScript, s);
}

它比 WORKS 看起来不错，但是如果 jQuery 存在并且页面上还没有 jQuery UI，则代码不会放入 jQuery UI。我该怎么做呢？因为其他软件也可能在操作页面，并将 jQuery 添加到页面中。我应该如何编码？认为我们不能使用 oScripts[0] 插入到该元素之前......因为我们真的不知道 jQuery 是从哪里调用的，只是它存在......

【问题讨论】：

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

【解决方案1】：

我看到您的 jQuery UI 没有加载。你的脚本：

if(!jQuery.ui)
{
   // bla bla
}

导致错误，因为未定义 jQuery。我认为您应该先等待 jQuery 完全加载，然后继续执行下一个函数以检查 jQuery UI 的可用性。您需要使用同步执行脚本：

if(!window.jQuery)
{
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.async = false; // CHANGES
   script.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
   var oScripts = document.getElementsByTagName("script");
   var s = oScripts[0];
   s.parentNode.insertBefore(script, s);
}

【讨论】：

已经进行了这些更改，但现在我得到了未定义的变量：jQuery。您如何建议我先等待 jQuery 加载？
也许我应该在这上面使用某种while loop？有什么想法吗？
@SolomonClosson 我再次打开了您上面的页面 URL，我发现它已修复并且我没有看到任何错误。我什至使用了拖动功能。你解决了这个问题吗？
好的，在我的问题中，我已经用我所做的更改在底部更新了它，但是，这需要更多的工作才能不加载 jQuery UI 的多个实例。
而且，这种方法的问题是，如果 jQuery 被加载，那么它不会费心加载 jQuery UI，因为它会认为它已经加载。如果加载了 jQuery，我仍然需要检查是否加载了 jQuery UI……所以，这可以进入 else 语句没问题……但是 jQuery UI 需要在 jQuery 之后加载，所以我不能使用 @ 987654324@ 到insertBefore 可以吗？

【解决方案2】：

序列非常重要，您需要先加载/导入 JQuery，然后只加载/导入 Jquery UI。如下： <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

【讨论】：