jQuery Sortable with locked items

by ian_smithz

HTML

<div class="row">

                            <div class="col-xs-6">

                                <ul id="list-left" class="sortable list-unstyled">
                                  <li data-ans="1">Introductory music</li>
                                  <li data-ans="2">Words of welcome</li>
                                  <li data-ans="3" class="correct">Thoughts on life and death from a non-religious perspective</li>
                                  <li data-ans="4">The tribute – an outline of the life and personality of the person who has died</li>
                                  <li data-ans="5">Readings of poetry and prose</li>
                                  <li data-ans="6">Reflection – a few moments for private thoughts about the person who has died, either in silence or accompanied by music</li>
                                  <li data-ans="7">The committal – when the curtains are closed for the cremation or coffin lowered for a burial</li>
                                  <li data-ans="8" class="correct">Closing words – including thanks on your behalf</li>
                                  <li data-ans="9" class="correct">Final music</li>
                                </ul>

                            </div>

                            <div class="col-xs-6">

                                <ul id="list-right" class="sortable list-unstyled">
                                  <li data-ans="1">Non-religious music chosen by the deceased or their family, to welcome mourners.</li>
                                  <li data-ans="2">Opening words, sometimes explaining what a Humanist funeral is all about.</li>
                                  <li data-ans="3">An explanation of Humanist beliefs about the afterlife and why the deceased opted to have such a ceremony.</li>
                                  <li data-ans="4">A personalised overview of the life of the deceased. This may be delivered by a family member or friend or it may be an...

CSS

.correct { color:red; }

li { background-color:whitesmoke; border:1px solid silver; width:200px; padding:2px; margin:2px; }


#list-left {
  float: left;
  margin-right: 10px;
}

#list-right {
  float: right;
}

JavaScript

$('.sortable').sortable({
    items: ':not(.correct)',
    start: function(){
        $('.correct', this).each(function(){
            var $this = $(this);
            $this.data('pos', $this.index());
        });
    },
    change: function(){
        $sortable = $(this);
        $corrects = $('.correct', this).detach();
        $helper = $('<li></li>').prependTo(this);
        $corrects.each(function(){
            var $this = $(this);
            var target = $this.data('pos');
            
            $this.insertAfter($('li', $sortable).eq(target));
        });
        $helper.remove();
    }
});

// destroy first if class being added on check in a conditional or sumfink
//        $( ".sortable" ).sortable( "destroy" );