[英]Having trouble debugging this jquery
好的,代码应该像这个小提琴http://jsfiddle.net/mjmitche/6nar4/一样工作,其中左侧的任何盒子都可以放入黑盒子内的盒子中。
在我的实时网站上,它不起作用。 如果您将 go 发送到此 web 地址,然后等待大约 10 秒钟,将出现一个下拉菜单,旁边有一个“确认”按钮。 单击确认,它将打开一个新页面。 新页面右侧的四个框都是可拖拽的,白框中的四个小框都是可拖放的。 然而,实际上,只有红色的小框——在下面的代码中是“#chair2”——是可丢弃的。 #chair1、#chair2、#chair3 不接受丢弃。
这是设置 droppable 和 draggable 的代码部分
$(document).ready(function($) {
$("#cloud1, #cloud2, #cloud3, #cloud4").draggable();
$("#chair1, #chair2, #chair3, #chair4").droppable({
accept: "#cloud1, #cloud2, #cloud3, #cloud4",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass ("ui-state-highlight")
.find ("p")
.html("dropped");
$("#topnav4").css({'background':'pink'});
}
});
});
这是从头到尾的所有 jquery 代码
$(document).ready(function(){
$(init);
});
function init() {
cloudshow();
}
function cloudshow() {
$("#intro").fadeIn(1000, function(){
$("#intro2").fadeIn(1000, function(){
$("#cloud1").fadeIn(2000, function(){
$("#cloud2, #cloud5").fadeIn(2000, function(){
$("#cloud3, #cloud4, #cloud6").fadeIn(2000, function(){
$("#message").fadeIn(1000, function() {
$("#contactform").fadeIn(1000)
});
});
});
});
});
});
};
var img1 = "url('/wp-content/themes/thesis_18/custom/images/map.jpg') repeat";
$(".submit").click(function(){
$("body.custom").css({background: img1});
$("#topnav4, #cloud1, #cloud2, #cloud3, #cloud4, #cloud5, #cloud6, #intro, #intro2, #message, #contactform").fadeOut(1000, function (){
$("#sidenav").fadeIn(1000, function(){
$("#topnav4").css({'background': 'none', 'display':'block'});
$("#bigbox").fadeIn(1000, function(){
$("#cloud1").css({'display':'block', 'position':'absolute','left':'600px', 'top': '50px', 'z-index': '2'});
$("#cloud2").css({'display':'block', 'position':'absolute','left':'600px', 'top': '150px', 'z-index': '2'});
$("#cloud3").css({'display':'block', 'position':'absolute','left':'600px', 'top': '250px', 'z-index': '2'});
$("#cloud4").css({'display':'block', 'position':'absolute','left':'600px', 'top': '350px', 'z-index': '2'});
});
});
});
});
$(document).ready(function($) {
$("#cloud1, #cloud2, #cloud3, #cloud4").draggable();
$("#chair1, #chair2, #chair3, #chair4").droppable({
accept: "#cloud1, #cloud2, #cloud3, #cloud4",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass ("ui-state-highlight")
.find ("p")
.html("dropped");
$("#topnav4").css({'background':'pink'});
}
});
});
您在页面上包含三次 jQuery。 在 Firebug 控制台中,如果您键入 jQuery.fn.draggable,您将得到未定义。 似乎多次包含 jQuery 会导致此问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.