CODEWITHSUNDEEP
javascriptjqueryjquery-ui
3gwebtrain
3gwebtrain

Reputation: 15303

Dynamic element under the droppable parent, over and out event not working properly

I have 2 columns, i made these 2 columns as droppable, when i "over" on any one of them, I am creating new "list" as it's children, and I am making children's as well droppable..

But i am not able to drop on the new children, I require to append the dragged list element to children element..

here is my function i wrote :

 var generate = function (id) {

  var id = "#" + id, c = 0, ul = $("<ul />");

  $(id).empty();

    while(c < 10 ) {
      c ++;  
        ul.append($("<li />", { text : c + " new list"}));
    }

    return ul;

}


$("li").draggable({

    revert:true,
    helper: "clone"

});

$(".cl").droppable({
    accept: "li",
    activeClass : "highLight",
    over: function( event, ui ) {

       var elements = generate(event.target.id);

        $("#" + event.target.id).append(elements);

        $(".cl li").droppable({
            over : function (event, ui ){
                console.log("it is over now!"); // not working
            },
            drop : function () {
                console.log ("dropped");
            },

out : function () {
 console.log ("I am out") // not working..
}


            });

        }
    });

Here is the live demo

Any one help me to sort this issue.. and new children became droppable and appending a copy of draggable list..?

Thanks in Advance..

Upvotes: 0

Views: 201

Answers (1)

fred02138
fred02138

Reputation: 3371

The problem is that you regenerating the top level children every time the mouse moves over the column. Fix it by adding this code at the top of your over: function:

if (event.target._generated)
    return;

event.target._generated = true;

Here is the working FIDDLE: http://jsfiddle.net/eM8CX/

Upvotes: 1

Related Questions