So, here’s the web-a-list-a-sortifier.. Ok, I’m gonna need some work on that name. Anyhow, I needed a way to simply drag and drop some arbitrary textual list, say from an excel spreadsheet and to import and export this list in a nice and simple way. Here is a jQuery driven solution, ready to use here and now:


    <title>Greycastle jQuery based list sorter</title>

    <link rel="stylesheet" href="" />
    <script src=""></script>
    <script src=""></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />

        #sortable-list {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 100%;

        #sortable-list li {
            margin: 0 3px 3px 3px;
            padding: 0.4em;
            padding-left: 2.6em;
            font-size: 1.4em;
            height: 18px;
            line-height: 0.7em;

        #sortable-list li span {
            position: absolute;
            margin-left: -1.3em;

        #sortable-list li span.remove-button {
            position: absolute;
            margin-left: -2.3em;

        #buttons-container input {
            float: right;
            margin-left: 15px;
            width: 100px;


        if (!String.prototype.trim) {
            String.prototype.trim = function () {
                return this.replace(/^\s+|\s+$/g, '');

        setList = function () {
            var html = "";
            var lines = $("#new-line-separated-text").val().trim().split("\n");
            for (var i = 0; i < lines.length; ++i) {
                html += '<li class="ui-state-default"><span class="remove-button ui-icon ui-icon-trash"></span><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' + lines[i] + '</li>';


            // Add remove hooks on all trash-buttons
            $(".remove-button").click(function () {

        getList = function () {
            var text = "";
            $("#sortable-list li").each(function (index, value) {
                text += $(value).text() + "\r\n";


        $(function () {


            // Prepare list
            $('#new-line-separated-text').val("Just select these rows\r\nand paste your own\r\nthen press {Set list}\r\nto generate your own reorderable list\r\nwhen you're done\r\npress {Get list}.\r\nClick the trashcan\r\nto remove any rows");





    <ul id="sortable-list">
    <br />
    <textarea id="new-line-separated-text" style="width: 100%; height: 120px;"></textarea>
    <br />
    <div id="buttons-container">
        <input type="submit" value="Set list" onclick="setList(); return false;" />
        <input type="submit" value="Get list" onclick="getList(); return false;" />
        <div style="clear: both;">
            <!-- break float -->


Why not join the newsletter?

Why not join the newsletter?

If you're not a fan of facebook or twitter, sign up to the newsletter and I'll send you a quick update every so often with what's going on and new posts coming out.

You have Successfully Subscribed!