jQuery可排序列表但不允许将元素拖到另一个列表中

Question

您好，我想为我的一个客户使用 jQuery sortable 来在他们的网站旋转器上订购横幅。

我有两个列表 sortable1 和 sortable2，sortable1 指的是已经选择的横幅，两个是可供选择的横幅。

默认情况下，公司需要两个默认横幅，因此无法从 div 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="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

将Nondrag 类添加到所需元素的<div class="bannersdiv"> 中，然后执行类似操作

$( "#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");

             }
         }
    }

这里是Fiddle