Ok, I keep getting an error message and am unable to drag any of the divs...
好吧，我不断收到一个错误消息，无法拖动任何div…
Error message is as follows:
错误信息如下:
Uncaught exception: TypeError: '$(".polaroidpolaroid_attachments_mod_25").draggable' is not a function Error thrown at line 343, column 4 in ($) in http://developers.dream-portal.net/test/index.php: $(".polaroidpolaroid_attachments_mod_25").draggable({ called via Function.prototype.apply() from line 2, column 33900 in (t) in http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js: if(a[u].apply(t[0],t[1])===!1&&e.stopOnFalse) called from line 2, column 34244 in () in http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js: (function 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)})})(arguments),i?o=a.length:n&&(s=t,l(n)) called from line 2, column 22488 in (e) in http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js: return v.ready.promise().done(e),this called from line 276, column 3 in startPolaroids() in http://developers.dream-portal.net/test/index.php: jQuery(document).ready(function($){ called from line 1322, column 5 in () in http://developers.dream-portal.net/test/Themes/default/scripts/script.js?fin20: aOnloadEventsi;
异常: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行调用，第33900列在http://ajax.leapis.com/ajax/libs/jquery/1/jquery.min.min.js: if(a[u].apply(t[0]，t[1])= !调用的函数(t，函数(t,n){var i=v.type(n);i== "function"?jQuery(文档).ready(函数($)，从第1322行调用，第5列在()http://developers.dream-portal.net/test/Themes/default/scripts/script.js?fin20:aOnloadEventsi;
I am using an external js file that gets loaded in the head of the webpage with the following function:
我使用的是一个外部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;
}
And in the body of the webpage (which is all I can access from the script that runs it), I have the following code written in PHP (so please excuse the escaping of quotations):
在网页的主体部分(这是我能从运行它的脚本中访问的全部内容)，我有以下用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);
I am unable the drag the divs, and they DO EXIST in the HTML. Am getting that error above, so, trying to pinpoint the exact problem here, could use another pair of eyes on this.
我无法拖动div，它们确实存在于HTML中。我得到了上面的错误，所以，试着找出这里的确切问题，可以用另一双眼睛来观察。
Here is a link to the actual page also, if it would help: http://developers.dream-portal.net/test/index.php
如果有帮助的话，这里还有一个实际页面的链接:http://developers.dream-portal.net/test/index.php
Thanks guys :)
谢谢大家:)
So, if I change this:
如果我改变这个
// 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);
}
To this:
:
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);
}
It than WORKS, which seems good and all, but the code does NOT put the jQuery UI in, if jQuery exists and jQuery UI doesn't on the page already. And how would I do that exactly? Cause other software could be manipulating the page also, and adding jQuery to the pages. How should I code this? Thinking we can't use oScripts[0] to be inserted before that element... cause we really won't know where the jQuery is being called from, just that it exists...
虽然看起来不错，但是如果jQuery已经存在，jQuery UI还没有出现在页面上，那么代码就不会放入jQuery UI。我该怎么做呢?因为其他软件也可以操作页面，并向页面添加jQuery。我该怎么写?认为我们不能在该元素之前插入oscript[0]。因为我们真的不知道jQuery从哪里被调用，仅仅因为它存在……
2 个解决方案
#1
4
I see that your jQuery UI is not loaded. Your script:
我看到您的jQuery UI没有加载。你的脚本:
if(!jQuery.ui)
{
// bla bla
}
Is causing error, since the jQuery is not defined. I think that you should wait for the jQuery to be fully loaded first then continue to the next function to check availability of jQuery UI. You need to use Synhronous execution of your script:
导致错误，因为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);
}
#2
0
Sequence is very important , you need to first load/import JQuery and then only Jquery UI. as below : <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，然后只加载JQuery UI。
#1
4
I see that your jQuery UI is not loaded. Your script:
我看到您的jQuery UI没有加载。你的脚本:
if(!jQuery.ui)
{
// bla bla
}
Is causing error, since the jQuery is not defined. I think that you should wait for the jQuery to be fully loaded first then continue to the next function to check availability of jQuery UI. You need to use Synhronous execution of your script:
导致错误，因为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);
}
#2
0
Sequence is very important , you need to first load/import JQuery and then only Jquery UI. as below : <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，然后只加载JQuery UI。