CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rhaebosis
Rhaebosis

Reputation: 57

Show hidden button on droppable :: javascript

Even if only one icon from my draggable box is dropped into the droppable area, I would like a hidden button to appear.

I am unsure if I could reference the css class I used to hide it or have the JavaScript generate the button.

This button will be needed later for an onClick event for a modal box.

Any help would be appreciated. :)

jsfiddle to look at http://jsfiddle.net/JeLZr/4/

The code below is what I am having issues with.

if ($(this).find('.draggable').length === 0) {
    $(this).append($(ui.draggable));
    if($(ui.draggable).find('button.generateReport').length === 0){
        $(ui.draggable).append('<input type="button" id="generateReport" class="BtnReport"  />');
    }
}

[edit] I realize this is a lot of to ask but is there any chance anyone can help with; as well as dragging the icon, if it is double clicked it will move into the droppable box?? Is this even possible with draggable/droppable??

Upvotes: 1

Views: 138

Answers (1)

Trevor
Trevor

Reputation: 16116

An attempt to answer the first question: 

 $("#drop").droppable({
        accept: ".draggable",
        drop: function (event, ui) {
            $('.BtnReport').show();
            console.log("drop");
            $(this).addClass("over");
            var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped).detach().css({
                top: 0,
                left: 0
            }).appendTo(droppedOn);


        },
        over: function (event, elem) {
            $(this).addClass("over");
            console.log("over");
        },
        out: function (event, elem) {
            $(this).removeClass("over");
        }
    });
    $("#drop").sortable();

    $("#grid").droppable({
        accept: ".draggable",
        drop: function (event, ui) {
            if($('#drop img').length == 1)
                $('.BtnReport').hide();                
            console.log("drop");
            $(this).removeClass("over");
            var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped).detach().css({
                top: 0,
                left: 0
            }).appendTo(droppedOn);

http://jsfiddle.net/trevordowdle/JeLZr/5/

I can look into the second question as well but it might be best to Create another question for it.

Upvotes: 2

Related Questions