Sort your list drag & drop in the web

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:

<html>

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

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />

    <style>
        #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;
        }
    </style>

    <script>

        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>';
            }

            $("#sortable-list").html(html);

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

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

            $("#new-line-separated-text").val(text.trim());
            $("#new-line-separated-text").select();
        }

        $(function () {

            $("#sortable-list").sortable();
            $("#sortable-list").disableSelection();

            // 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");
            setList();

        });

    </script>

</head>

<body>

    <ul id="sortable-list">
    </ul>
    <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 -->
        </div>
    </div>

</body>

</html>

Sort your list drag & drop in the web

Submit a Comment Cancel reply