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

【问题标题】：jQuery Sortable - Move item to top of list if dragged out.jQuery Sortable - 如果拖出，将项目移动到列表顶部。
【发布时间】：2023-04-02 22:22:01
【问题描述】：

您好，我正在使用 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();
});

});

【问题讨论】：

标签： javascript jquery jquery-ui-sortable

【解决方案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/

【讨论】：