Drop on same dragged element

Question

I want to create a jquery drag and drop like below

1) I can drag a element with the class doDrag 2) I can drop that doDrag into a div called #content 3) Also doDrag elements should be able to drop into the older doDrag divs which were dropped before into the #content div

I did it like below. But got issues.

       $(".doDrag").draggable({
            helper:"clone"
       });

        makeDroppable($("#content"));

       function makeDroppable(elements) {

        console.debug(elements);
        $(elements).droppable({
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function (event, ui) {
                var uuid = guid();
                $(this).append("<div style='border:2px solid;height:50px;width:400px;' id='" + uuid + "'>Drop</div>");
                makeDroppable($("#" + uuid));
                return false;
            }
        });
    }

What happened was drop event is calling multiple times.

Can anyone help me on this please

Answer 1

Finally found the answer.

what i had to do is add greedy:true

elements.droppable({
            greedy: true,
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function (event, ui) {

                console.debug($(this));
                var uuid = guid();
                $(this).append("<div style='border:2px solid;height:50px;width:400px;' id='" + uuid + "'>Drop</div>");
                makeDroppable($("#" + uuid));
                return false;
            }
        });