I've managed to solve my first problem. Now I'm thinking about playlists. There should be 2 containers, one is lsource list, another is playlist.
All of them is dropable, Ok, there is demo in jqueryui demos with that functionality but i want playlist to bi selectable and don't know how to do that. This is a part of shopping cart demo.
$(function() {
$("#catalog 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);
}
}).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");
}
});
});
I want to make items in shoping chart selectable with serialize but don't know how.