Question

您好我使用的是jQuery Sortable，我有两个列有横幅的列表，并且“Selected Banners”中的横幅顺序可以更改。我们有3套横幅：

默认横幅（由公司设置，除非选择2个或更多，否则是强制性的）
特别横幅（由公司设定，但没有强制要求）
可选择的横幅（可供选择的一般横幅）

我有两个名单，一个名为“可用横幅”，另一个名为“选定横幅”。默认横幅以红色定义，如果存在两个或更多，则可以删除。

然而，当我删除这些默认横幅时，它们要么被放置在列表的底部，而是放置在我放置它们的位置，具体取决于放置的精度。

他们使用jQuery的方式我可以将所有名为defaultbanner的项目移到＃sortable2列表的顶部吗？

我的代码位于下方，您也可以查看我的JSFiddle

JS.js

$( document ).ready(function() {
    $(function() {
    $("#sortable1").sortable({
      cancel: ".ui-state-disabled",
      handle: ":not(input)"
    });

  $("#sortable2").sortable({
        cancel: ".ui-state-disabled",
          receive: function (event, ui) {
           if (ui.item.hasClass("defaultbanner")) {
           $(ui.sender).sortable('cancel');
           alert("This is a default banner, it can be sorted but not removed.");
       }
   }
      });

  //new function to define that if a Partner has more than 2 selectable banners then the defaultbanner. If less than two selectable banners than the default banner cannot be

  $("#sortable2").sortable({
    cancel: ".ui-state-disabled",
      receive: function (event, ui) {
       if (ui.item.hasClass("defaultbanner") && $('#sortable1 li').length <= 1) {
           $(ui.sender).sortable('cancel');
           alert("This is a default banner, it can be sorted but not removed.");
       }
       else if($('#sortable1 li').length <= 1) {
          $(ui.sender).sortable('cancel');
          alert('You must have at least two banners');    
      }
       }
  });

  $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
  }).disableSelection();

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

  // no more than 7 banners allowed 
  $("#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 > 7
            if ($(this).children().length > 7) {
                //ui.sender: will cancel the change. Useful in the 'receive' callback.
            $(ui.sender).sortable('cancel');
            alert('Your selection has been cancelled. A maximum 7 banners are allowed in the carousel.');
        }
        if ( $('#sortable1 .selectablebanner').length > 4) {
            alert('Your selection has been cancelled. A maximum 4 custom banners are allowed in the carousel.');
            $(ui.sender).sortable('cancel');
        }  
    }
}).disableSelection();
});

});

Answer 1

是的，只需添加一个伪sorting函数作为receive

的最后一次调用

function doSortMe(){
        console.log('sorting');
         $('#sortable2').prepend($('#sortable2 .defaultbanner'));  
    }
/////    .....
        $("#sortable2").sortable({
            cancel: ".ui-state-disabled",
            receive: function (event, ui) {
                if (ui.item.hasClass("defaultbanner") && $('#sortable1 li').length <= 1) {
                    $(ui.sender).sortable('cancel');
                    alert("This is a default banner, it can be sorted but not removed.");
                } else if ($('#sortable1 li').length <= 1) {
                    $(ui.sender).sortable('cancel');
                    alert('You must have at least two banners');
                }
                doSortMe(); //<-- Added call here
            }
        });

演示：http://jsfiddle.net/robschmuecker/J9eQL/2/

jQuery Sortable - 如果拖出项目，将项目移动到列表顶部。

1 个答案: