Question

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

错误信息如下：

未捕获的异常：TypeError： '$（“。polaroidpolaroid_attachments_mod_25”）。draggable'不是 function（$）中第343行第4列抛出的函数错误在http://developers.dream-portal.net/test/index.php： $（“。polaroidpolaroid_attachments_mod_25”）。draggable（{通过Function.prototype.apply（）从第2行，第33900行在（t）中调用） http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js： if（a [u] .apply（t [0]，t [1]）===！1＆amp;＆amp; 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和放大器;＆安培;我== “字符串” ＆放大器;＆安培; R（N）}）}）（参数），I O！？ =则为a.length：N＆安培;及（S = T，L（n））的从第2行，（e）中的第22488栏调用 http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js： return v.ready.promise（）。done（e），这是从startPolaroids（）中的第276行第3列调用的 http://developers.dream-portal.net/test/index.php： jQuery（document）.ready（function（$）{从第1322行调用，在（）中的第5列调用 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 UI，如果jQuery存在且jQuery UI已经没有在页面上。那我该怎么做呢？因为其他软件也可以操纵页面，并将jQuery添加到页面。我该怎么编码呢？认为我们不能在该元素之前插入oScripts [0] ...因为我们真的不知道从哪里调用jQuery，只是它存在...

Answer 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);
}

Answer 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>

jQuery UI draggable不是函数Error

2 个答案: