Question

抱歉，我只能在实时沙盒网站上显示此问题。如果你转到prupt.com，大约8-10秒后，屏幕中间会出现一个下拉菜单。如果单击下拉菜单旁边的“确认”，背景图像将会更改，框将消失，稍后将在下一页重新显示。

一切正常。

但是，当我在下面添加此代码以使第二页上的框可拖动并可放置，然后再次访问该网站时，一旦我点击第一页上的“确认”，它就会重新加载相同的第一页而不更改背景图片等。

下面的代码本身就是功能性的，因为我在这个小提琴上进行了测试http://jsfiddle.net/gq6En/65/

所以有人可以解释为什么，如果我添加此代码，它会在您点击第一页上的确认按钮后改变功能吗？

$(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");
            $("#topnav").css({'background':'pink'});
         }

      });
});

更新，当我将代码放入此文档时（正如@kwicher所建议）并再试一次，更改为第二页的过程开始，但之后又恢复到第一页页。

$(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");
                $("#topnav").css({'background':'pink'});
             }

          });

});

Answer 1

尝试在$（document）.ready

上执行代码

Jquery - 添加功能可拖动代码混乱程序

1 个答案: