While appending a text box in a div within a droppable div

Question

I have one div where i am dropping and appending text box, that's working perfectly but problem is I have one more div within that div (like section) where i have to drop and append same text box but it’s now dropping twice, one for inner div and other for outer div, but I want inner div only. I have tried to Google but couldn't find much help. So it will be very helpful if anyone has an idea regarding this. Thank you.

http://jsfiddle.net/Dw66V/

here is the code but not complete as its very complex

     $(function () {
                        var $Drag_tbox = $("#Drag_tbox"),                       
                            $drop_box = $("#tabs-1"),
                            $drop_box_sec = $("#secdiv");


                $Drag_tbox.draggable(
                        {
                            zIndex: 9003,
                            revert: "invalid",
                            helper: "clone",
                            drag: function (event, ui) {
                                num = 1;
                                return num;
                            }
                        });



                $drop_box_sec.droppable({
                    zIndex: 9003,
                    drop: function (event, ui) {

                            if (num == 1) {
                                $drop_box_sec.append('<tr><td align="center"><asp:Label runat="server" Text="Label"></asp:Label><input id="Text1" type="text" /></tr></td>');                          
                            }

                    }

                });


                $drop_box.droppable({
                    zIndex: 9003,
                    drop: function (event, ui) {

                            if (num == 1) {
                                $drop_box.append('<tr><td align="center"><asp:Label runat="server" Text="Label"></asp:Label><input id="Text1" type="text" /></tr></td>');

                            }                       

                    }



     });
});

Maybe add some code or example to explain your problem in the right way ;) — Nk SP, Apr 24 '14 at 14:11

score 0 · Accepted Answer · edited May 23 '17 at 12:05

Well, you can unbind the event for the outer box when the event for the inner box is fired, and then bind it again when it's done. If you use jQuery, you could go with off() or unbind(). Please post your code so I can refer to that.

After seeing the code: http://jsfiddle.net/Dw66V/3/

I added a draggable div. What happens now, when something is dropped on the inner element, the outer element droppable gets disabled, then it is enabled again after a short timeout.

$drop_box_sec.droppable({
  drop: function (event, ui) {
    $drop_box.droppable('option', 'disabled', true);
    // Your code here
    setTimeout(function () {
      $drop_box.droppable('option', 'disabled', false);
    }, 500);
  }
});

THE BETTER WAY TO DO IT :) (via Jquery drop callback of droppable method called twice)

Just add the option 'greedy' to the inner div, like this:

$drop_box_sec.droppable({
  greedy: true,
  drop: function (event, ui) {
    // Your code here
  }
});

this works fine out of the box. http://jsfiddle.net/Dw66V/4/

Bro it works good for inner div but when i am seeing in this fiddle that the test is not working for outer div? — DK21, Apr 25 '14 at 06:24

While appending a text box in a div within a droppable div

1 Answers1