Question

您好我想使用jQuery sortable我的客户端用于在他们的网站旋转器上订购横幅。

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

默认情况下，公司需要两个横幅默认，因此无法从div sortable1中删除，但可以对这些横幅进行排序。

为了尝试实现这一目标，我将我的班级改为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

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

指定转盘中包含的项目（最多允许6个横幅）：

1 个答案: