DOM Manipulation
DOM Manipulation
Hello,
I am working on elements of my web application that will be draggable
and droppable. I have got to a point where I need some help to
continue with my development, see code below:
//Javascript document
$(document).ready(function(){
$("li").draggable({
containment: 'body',
helper: 'clone',
opacity: '0.3'
});
$(".droppable").droppable({
accept: "li",
activeClass: "droppable-active",
hoverClass: "droppable-hover",
drop: function(ev, ui){
//jQuery.each($(this), function)
$(this).appendTo("drop_ul").append("<li>" + $
(ui.draggable).text() + "</li>");
}
});
});
When I drop an element I want to make sure that there are no multiples
of the same element, my thought was that I would modify the DOM by
getting the <ul> I require and then looping through each <li> if there
is no match then I would append the <li> if there was a match I would
offer an alert or something, which I can work later. The part I would
like to know is how would I get the <ul> and write the loop? See where
I have commented out the line.
Thanks.