Ok, sigo recibiendo un mensaje de error y no puedo arrastrar cualquiera de los divs…

Mensaje de Error es el siguiente:

Uncaught exception: TypeError:
‘$(«.polaroidpolaroid_attachments_mod_25»).la posibilidad de arrastrar’ no es un
la función de Error generado en la línea 343, columna 4 en ($)
en http://developers.dream-portal.net/test/index.php:
$(«.polaroidpolaroid_attachments_mod_25»).draggable({ llamada a través de la Función.el prototipo.aplicar() de la línea 2, columna 33900 en (t) en
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:
si(a[u].aplicar(t[0],t[1])===!1&&e.stopOnFalse) llamar desde la línea 2, columna 34244 en () en
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:
(la función r(t){v. cada(t,función de(t,n){var i=v. type(n);i===»function»?(!e.unique||!c.has(n))&&a.push(n):n&&n.length&&i!==»string»&&r(n)})})(arguments),i?o=a.length:n&&(s=t,l(n))
llamada de la línea 2, columna 22488 en (e) en
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:
volver v. listo.promesa().hecho(e),esta llamada de la línea 276, columna 3 en startPolaroids() en
http://developers.dream-portal.net/test/index.php:
jQuery(document).ready(function($){ llamar desde la línea de 1322, la columna 5 en () en
http://developers.dream-portal.net/test/Themes/default/scripts/script.js?fin20:
aOnloadEventsi;

Estoy utilizando un archivo js externo que se carga en la cabeza de la página web con la siguiente función:

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

Y en el cuerpo de la página web (que es todo lo que puedo de acceso de la secuencia de comandos que funciona), tengo el siguiente código escrito en PHP (por favor, disculpe la escapando de las citas):

//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);

Soy incapaz de arrastrar los divs, y que EXISTEN en el código HTML. Estoy consiguiendo que el error de arriba, así que, tratando de identificar el problema exacto aquí, podría utilizar otro par de ojos.

Aquí hay un enlace a la página actual, también, si es de ayuda: http://developers.dream-portal.net/test/index.php

Gracias chicos 🙂

Así que, si puedo cambiar esto:

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

A este:

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

Es que las OBRAS, que parece buena y todo, pero el código NO poner la interfaz de usuario jQuery, si jQuery existe y jQuery UI no en la página de ya. Y cómo lo voy a hacer exactamente? La causa de otro software podría ser la manipulación de la página también, y la adición de jQuery para las páginas. ¿Cómo debo este código? Pensando que no podemos utilizar oScripts[0] para ser insertado antes de ese elemento… causa que realmente no sabe de dónde jQuery que se llama la de, simplemente que existe…

2 Comentarios

  1. 4

    Veo que su interfaz de usuario jQuery no está cargado. Script:

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

    Está causando el error, ya que el jQuery no está definido. Creo que usted debe esperar para que el jQuery para cargar completamente la primera, a continuación, continúe con la siguiente función para comprobar la disponibilidad de jQuery UI. Usted necesidad de utilizar Synhronous ejecución del script:

    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);
    }
    • Se han realizado estos cambios, pero ahora me estoy poniendo undefined variable: jQuery. ¿Cómo sugieren que puedo esperar para el jQuery para ser el primero en cargarse?
    • Tal vez debería usar un while loop de algún tipo sobre esto? Alguna idea?
    • Abrí de nuevo la URL de su página de arriba y me encontré con que estaba fijo y no vi ningún error. Que incluso se utiliza la función de arrastre. Se ha logrado el problema?
    • Ok, En mi pregunta, me han actualizado en la parte inferior con los cambios que hice, sin embargo, se necesita más trabajo para no cargar varias instancias de la interfaz de usuario jQuery.
    • Y también, el problema con este enfoque es que si jQuery es cargado, que no molestan a la carga de la interfaz de usuario jQuery, porque va a pensar que es cargado. Todavía tengo que comprobar si la interfaz de usuario jQuery se carga si jQuery es cargado… en fin, que podría ir en una instrucción else, no hay problema… pero la interfaz de usuario jQuery necesita ser cargado después de jQuery, así que no podía usar oScripts[0] a insertBefore podría?
    • Argg, en realidad no necesita comprobación de múltiples instancias de jQuery jQuery UI si es indefinido… DUH! No sé por qué yo no vea. Sólo tiene que comprobar varias instancias de jQuery jQuery UI SI ya ESTÁ definido! y si es así, no agregarlo de nuevo. Pero si no, que se habrá añadido (Pero podríamos utilizar el oScripts[0] para esto todavía?)
    • Y también, gracias por señalarme en el lugar apropiado y hacer que me inició… 🙂 +1
    • qué significa que se ha resuelto es?
    • Marcar esto como mi respuesta, y me ha resuelto el problema por ahora. Francamente, algo sobre lo que no nos parece bien. No estoy seguro de lo async en realidad no, pero me puse ambos jQuery y jQuery UI secuencias de comandos para falso en esto para estar seguro supongo… Gracias 🙂
    • Claro, eres bienvenido. Me alegro de que te pueda ayudar con esto 🙂

  2. 0

    Secuencia es muy importante , primero debe cargar/importar JQuery y, a continuación, sólo Jquery UI. como a continuación :
    <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>

Dejar respuesta

Please enter your comment!
Please enter your name here