Reputation: 15303
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..
}
});
}
});
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
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