Question

http://jsfiddle.net/fzTak/7/

i came across one post telling this on stackoverflow but it is not having trash functionality to remove a single item from the sortable list and also how can we implement the size for the sortable list(which means if we give 5 as the size of the sortable list then it must take 5 elements, on drop of 6th element or so it must alert somehow)

any help on this is greatly appreciated

regards
blaaze

Answer 1

To only remove a single item instead of all, you can replace the find(class) with find(itembeingdragged) when it’s dragged back:

    $( ".draggable" ).droppable({


        drop: function  (event, ui) {
                          $("#sortable").find(ui.draggable).remove();
        } 

    }); 

Of course that would mean that if you also want to have a remove all, that would have to be implemented separately

As for the maximum amount: one way is to stop dragging alltogether by having the drag event return false inside the draggable (based on the number of items)

   $( ".draggable" ).draggable({

        connectToSortable: "#sortable",

        helper: "clone",

        revert: "invalid",

        drag: function(){
            var cnt = $("#sortable").find("li").size();
            return cnt < 5;
        }

    });

Don’t know if stopping the drag is acceptable, but I thought it was the easiest way in the given scenario 🙂

The updated fiddle: http://jsfiddle.net/fzTak/20/