jQuery Sortable-ドラッグアウトした場合、アイテムをリストの一番上に移動します。

こんにちは私はjQuerySortableを使用しています。バナーで埋められた2つのリストがあり、「選択されたバナー」のバナーの順序を変更できます。3セットのバナーがあります。

• デフォルトのバナー（会社によって設定され、2つ以上が選択されていない限り必須）
• 特別バナー（会社によって設定されますが、必須ではありません）
• 選択可能なバナー（選択可能な一般的なバナー）

私は2つのリストを持っています。1つは利用可能なバナーと呼ばれ、もう1つは選択されたバナーと呼ばれます。デフォルトのバナーは赤で定義されており、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();
});

});