jQuery sortable list but not allowing element to be dragged into another list

Question

Hi I want to use jQuery sortable for a client of mine to use to order banners on their sites rotator.

I have two lists sortable1 and sortable2, sortable1 refers to banners already selected and two are banners to chose from.

By default the company requires two of the banners to default therefore cannot be removed from the div sortable1 but these can be sorted.

To try and achieve this I changed the class of my li to ui-state-disabled but this only lead to it not been sortable which is not what I require.

Does any one know how I can achieve this not been draggable but sortable? Would love some help this as I'm not the best with jQuery.

An example of my code is below or view my jsFiddle.

index.html

Specify which items are included in your carousel (maximum 6 banners allowed):

    <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="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>

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();
 });

Answer 1

What about adding a class Nondrag to the needed element's <div class="bannersdiv"> and then do something like this

$( "#sortable2" ).sortable({
        receive: function (event, ui) {
             // so if > 10
             if (ui.item.hasClass("nondrag")) {
                 $(ui.sender).sortable('cancel');
                 alert("you can't remove these banners");

             }
         }
    }

Here is the Fiddle