Сортируемый список jQuery, но не позволяющий перетаскивать элемент в другой список

Привет, я хочу использовать jQuery для сортировки для моего клиента, чтобы использовать для создания баннеров на своих ротаторах сайтов.

У меня есть два списка sortable1 и sortable2, sortable1 относится к уже установленным баннерам, а два - к баннерам.

По умолчанию компания требует два баннеров к невыполнению поэтому не может быть удалена из сНа sortable1, но они могут быть отсортированы.

Чтобы попытаться достичь этого, я изменил класс моего li на ui-state-disabled но это только привело к тому, что он не был сортируемым, что не то, что мне нужно.

Кто-нибудь знает, как я могу достичь этого, не перетаскиваемый, а сортируемый? Хотелось бы помочь некоторым, так как я не лучший с jQuery.

Пример моего кода приведен ниже или просмотрите мой jsFiddle.

index.html

Укажите, какие элементы включены в вашу карусель (допускается максимум 6 баннеров):

    <p>Market Update and SJP Awards are default banners, these can be re-ordered but not removed.</p>
    <ul id="sortable1" class="connectedSortable">
        <div class="bannersdiv">
            <li class="ui-state-default ui-state-disabled bannerslist">
                <div>Market Update (not able to be dragged out of this area)</div>
                <img src="images/img1.jpg" class="banners" />
            </li>
        </div>
        <div class="bannersdiv">
            <li class="ui-state-default ui-state-enabled bannerslist">
                <div>Investing for Income</div>
                <img src="images/img2.jpg" class="banners" />
            </li>
        </div>
        <div class="bannersdiv">
            <li class="ui-state-default ui-state-disabled bannerslist">
                <div>Awards (not able to be dragged out of this area)</div>
                <img src="images/img3.jpg" class="banners" />
            </li>
        </div>
        <div class="bannersdiv">
            <li class="ui-state-default ui-state-enabled bannerslist">
                <div>Long Term Care</div>
                <img src="images/img4.jpg" class="banners" />
            </li>
        </div>
        <div class="bannersdiv">
            <li class="ui-state-default ui-state-enabled bannerslist">
                <div>Later Life Planning</div>
                <img src="images/img5.jpg" class="banners" />
            </li>
        </div>
        <div class="bannersdiv">
            <li class="ui-state-default ui-state-enabled bannerslist">
                <div>Junior ISA</div>
                <img src="images/img6.jpg" class="banners" />
            </li>
        </div>
    </ul>

<h3 class="docs">Please select banners you would like to add to your carousel:</h3>

    <script>
        $(".sortable").sortable();
        $(".sortable").disableSelection();
        $('.sortable').sortable({
            cancel: '.sjppawards'
        });
    </script>
    <ul id="sortable2" class="connectedSortable">
        <div class="bannersdiv">
            <li class="ui-state-default ui-state-enabled bannerslist">
                <div>E-Investor</div>
                <img src="images/img7.jpg" class="banners" />
            </li>
        </div>
        <div class="bannersdiv">
            <li class="ui-state-default ui-state-enabled bannerslist">
                <div>Work Place Pensions</div>
                <img src="images/img8.jpg" class="banners" />
            </li>
        </div>
        <div class="bannersdiv">
            <li class="ui-state-default ui-state-enabled bannerslist">
                <div>Market Update</div>
                <img src="images/img1.jpg" class="banners" />
            </li>
        </div>
        <div class="bannersdiv">
            <li class="ui-state-default ui-state-enabled bannerslist">
                <div>Investing for Income</div>
                <img src="images/img2.jpg" class="banners" />
            </li>
        </div>
        <div class="bannersdiv">
            <li class="ui-state-default ui-state-enabled bannerslist">
                <div>Awards</div>
                <img src="images/img3.jpg" class="banners" />
            </li>
        </div>
        <div class="bannersdiv">
            <li class="ui-state-default ui-state-enabled bannerslist">
                <div>Long Term Care</div>
                <img src="images/img4.jpg" class="banners" />
            </li>
        </div>
    </ul>
    <link rel="stylesheet" href="/jquery-ui.css" />
    <script src="/jquery-1.9.1.js"></script>
    <script src="/jquery-ui.js"></script>

JS/js.js

$(function () {
 $("#sortable1").sortable({
     cancel: ".ui-state-disabled"
 });

 $("#sortable2").sortable({
     cancel: ".ui-state-disabled"
 });
 $("#sortable1, #sortable2").sortable({
     connectWith: ".connectedSortable"
 }).disableSelection();


 $("#sortable1 li, #sortable2 li").disableSelection();
 });

 $(function () {
 $("#sortable1").sortable({
     connectWith: '.connectedSortable',
     //receive: This event is triggered when a
     //connected sortable list has received an item from another list.
     receive: function (event, ui) {
         // so if > 10
         if ($(this).children().length > 6) {
             //ui.sender: will cancel the change.
             //Useful in the 'receive' callback.
             $(ui.sender).sortable('cancel');
             alert('Your selection has been cancelled. Maximum  6 banners are allowed in the carousel.');

         }
     }
 }).disableSelection();
 });