Removing shopping cart draggables from placeholder
Hi all. I was hoping someone could help me with this as I have searched the forums but havent found the answer. Im sort of new to jQuery.
I am currently using the Droppable shopping cart http://jqueryui.com/demos/droppable/#shopping-cart example. However I can't seem to remove items or lists from the placeholder (the div where the item is dropped). I am currently using the following function below. However this doesnt seem to target the area where the list is dropped, which has a class of placeholder. If I assign an id to the list I want removed it only removes it from the navigation area (place it sits before dragging) and not the place where it is dropped.
Any help is appreciated. Thanks.
Function to remove dropped items.
- function test()
{
$('.placeholder:li').empty();
}
Then here is my function for the drag and drop items
- ////// Drag and Droppable Items
$(function() {
$("#accordion").accordion();
$("#accordion li").draggable({
appendTo: "body",
helper: "clone"
});
$("#cart ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function(event, ui) {
$(this).find(".placeholder").remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this);
},
buttons :{"Ok": function() {
$(this).li("close");
}
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$(this).removeClass("ui-state-default");
}
});
});