Question

I have a div that when the webpage first loads is empty (collectionBin). I have thumbnail images that users can drag and drop into that empty div. I have a div that is hidden that provides options for users. I want this div to become visible only when the empty div (collectionBin) has an image inside of it. I’m not sure if I am explaining this well enough. Below is a link to the page that will hopefully help.

http://www.plantcombos.com/header/main_index.php?display=random_mix&currentpage=1

Any help would be much appreciated. Thanks.

Answer 1

In your code here

$("#collectionArea").droppable({
    accept: ".selector",
    drop: function(event, ui) {
            $(this).append($(ui.draggable).clone());
            $("#collectionArea .product").addClass("item");
            $(".item").removeClass("ui-draggable selector");
            $(".item").draggable({
                    containment: "parent",
                    grid: [72,72],
            });
    }
});

Try adding a line in the drop function: $("#cbOptions").show() (or whatever div you want to appear).