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

Question

您好，我正在使用 jQuery Sortable，我有两个列表，其中填充了横幅，并且可以更改“选定横幅”中的横幅顺序。我们有 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/