JQuery UI where one list sorts other list

This is a demo using Jquery UI which sorts one list (unsortable) depending on the actions taken by another list.

by FrictionlessPulley

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<div id="transcript-page">
    <em>not-sortable</em>
    <div id="data-01" class="ui-state-default" >Data Section A</div>
    <div id="data-02" class="ui-state-default">Data Section B</div>
    <div id="data-03" class="ui-state-default">Data Section C</div>
    <div id="data-04" class="ui-state-default">Data Section D</div>
</div>

<div id="dialog">
    <em>sortable</em>
    <ul id="sortable">
        <li id="data-01" class="ui-state-highlight">DATA A</li>
        <li id="data-02" class="ui-state-highlight" >DATA B</li>
        <li id="data-03" class="ui-state-highlight">DATA C</li>
        <li id="data-04" class="ui-state-highlight">DATA D</li>
    </ul>
</div>

CSS

#dialog, #transcript-page {float:left; width:300px;height:auto;border:1px solid #000;display:block;margin:2em;padding:1em;text-align:center;}
#dialog {float:right;}
.ui-state-highlight,.ui-state-default {border:1px solid #000;padding:1em;maring:0.3em;}

JavaScript

$(function() {

    $('#sortable').sortable({
        start: function(event, ui) {
            iBefore = ui.item.index();
        },
        update: function(event, ui) {
            iAfter = ui.item.index();
            evictee = $('#transcript-page div:eq(' + iAfter + ')');
            evictor = $('#transcript-page div:eq(' + iBefore + ')');

            evictee.replaceWith(evictor);
            if (iBefore > iAfter) evictor.after(evictee);
            else evictor.before(evictee);
        }
    });


});