jQueryUI sortable - add and remove items with icon between 2 list views

css, html, jquery, jquery-ui

Solution

The first problem with the icons is solved by making the icon dependent on the container the item is in. This also makes it easier to implement the add and remove functions because you don't have to care about the icon anymore.

So I added a class `.selected` to your selected area, replaced the `.icon-trash`, `.icon-plus` with `delete` and `add` classes from the links and added the following styles (which I have just copied from jquery UI):

.dvdlist a { /* plus */
    background-position: -16px -128px;
}
.selected a { /* trash */
    background-position: -176px -96px;
}

The second problem is solved by a simple click handler:

$('.delete, .add').on('click', function() {
    item = $(this).parent();
    item.fadeOut(function() {
        if (item.parent().attr('id') == 'trash') {
            $('#gallery').append(item.fadeIn());
        } else {
            $('#trash').append(item.fadeIn());
        }
    });
});

I updated your fiddle: http://jsfiddle.net/w3vvL/11/

Problem

I am new to jQuery and struggling with the sortable option in jQueryUI. When you click on the delete icon i want the dvd to be added to the unselected area and the icon to change to a plus (+). When you then click on the plus icon in the unselected area i want the item to move into the "added area" and the icon to change to a "bin" Same principle for when you drag and drop an item from one div to another. Just need the icons to toggle depending on the div they are in. I have a demo here: - http://jsfiddle.net/w3vvL/3/ ``` $("#gallery").sortable({ connectWith: "#trash" }); $("#trash").sortable({ connectWith: "#gallery" ``` }); Any help / pointers would be great.

Original source