Question

O.K，代码应该像这个小提琴http://jsfiddle.net/mjmitche/6nar4/一样工作，左边的任何方框都可以放入黑匣子里面的方框。

在我的直播网站上，它无效。如果您转到此网址，并等待大约10秒钟，则会出现一个下拉菜单，旁边有一个“确认”按钮。单击确认，它将打开一个新页面。新页面右侧的四个框都是可拖动的，白色框中的四个小框都是可放置的。但实际上，只有小红框 - 下面代码中的“＃chair2” - 是可以删除的。＃chair1，＃chair2，＃chair3不接受丢弃。

prupt.com

这是设置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'}); 
             }      
      }); 
 });

Answer 1

你在页面上包含jQuery三次。在Firebug控制台中，如果键入jQuery.fn.draggable，则会得到未定义的内容。看起来多次包含jQuery会导致这种情况。

调试此jquery时遇到问题

1 个答案: