Sortable list

JQueryUI: add/remove/drag/drop items in a list.

by Alon Rotem

HTML

<div id="content" style="width:200px">
</div>
<p>
    <input type="text" placeholder="new item..." id="newItemText"/>
    <input type="button" value="+" id="btnAddItem"/>
</p>
<p>
    <input type="button" onclick="getItems()" value="get vals"/>
</p>

JavaScript

//Onload
$(function () {
    //faster performance
    $( "#content" ).sortable();
    $( "#content" ).disableSelection();
    //slower sort/move
    /*
    $("#content").sortable({
        revert:true,
        beforeStop: function (event, ui) { 
            newItem = ui.item;
        },
        receive: function(event,ui) {
            $(newItem).attr("id","draggable");     
        }
    });
    $( "#draggable" ).draggable({
        connectToSortable: "#content",
        revert: "invalid"
    });
    */
    
    $("#btnAddItem").click(addNewItem);
    appendItem("item number 1");
    appendItem("item number 2");
    appendItem("item number 3");
    appendItem("item number 4");
    appendItem("item number 5 with very long text bla bla bla bla bla");
});

function addNewItem()
{
    var newValueText = $("#newItemText").val();
    if(newValueText)
    {
        appendItem(newValueText);
    }
    $("#newItemText").val("");
}

function appendItem(itemText)
{
    var divAlreadyContaining = $("#content").find("div").find("td").filter(function () 
    { 
        return $(this).text() == itemText;
    });
    if(divAlreadyContaining.length == 0)
    {
        var curItem = $("#content").find("div").length;
        $("#content").append("<div style=\"border: 1px solid black; padding: 2px;cursor:move;\"><table width='100%'><tr><td>" + itemText + "</td><td><span style='float:right;display:inline-block;cursor:pointer;color:red; font-weight:bold;font-family: sans-serif; background-color:#DFDFDF;' id='remove_"+curItem+"'>X</span></td></table></div>");
        $("#remove_"+curItem).click(function (){
            $(this).closest("div").remove();
        });
    }
}

function getItems()
{
    var list="";
    $.each($("#content").find("td").filter(function(){
        return $(this).find("span[id^='remove_']").length == 0;}), function()
    { 
        list+= ((list)? "///" : "") +  $(this).text(); 
    });
    alert(list);
}