Question

Sorry, but I can only show this problem on a live sandbox site. if you go to prupt.com, after about 8-10 seconds a drop down menu will appear in the middle of the screen. If you click “confirm” next to the dropdown menu, the background image will change and the boxes will disappear and reappear later on the next page.

All that works fine.

However, when I add this code below to make the boxes on the second page draggable and droppable, and then visit the site again, once I click “Confirm” on the first page, it just reloads the same first page without changing the background image etc.

This code below, in itself, is functional, as I tested it on this fiddle http://jsfiddle.net/gq6En/65/

So can anyone explain why, if I add this code, it alters the functionality once you click the confirm button on the first page?

$(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'});
         }

      });
});

Update, when I put the code in this document ready (as suggested by @kwicher) and try again, the process to change to the second page starts, but then it reverts back to the first page.

$(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

Try to execute the code on $(document).ready