jQuery Sortable - 드래그 아웃하면 항목을 목록의 맨 위로 이동합니다.

안녕하세요 저는 Sortable jQuery를 사용하고 있습니다. 배너로 채워진 두 개의 목록이 있으며 "Selected Banners"에있는 배너의 순서는 변경할 수 있습니다. 우리는 배너 3 개 세트 있습니다jQuery Sortable - 드래그 아웃하면 항목을 목록의 맨 위로 이동합니다.

기본 배너를 (회사가 설정하고 의무적으로 2 개 이상 선택하지 않는 한)
특별 배너 (회사가 설정되지 있지만 필수)
선택 배너 (일반 배너 가능 선택 용)

나는 Available Banners와 Other Called Selected Banners라는 두 개의 목록을 가지고 있습니다. 기본 배너는 빨간색으로 정의되어 있으며 둘 이상의 배너가있는 경우 제거 할 수 있습니다.

그러나 이러한 기본 배너를 제거하면 드롭의 정밀도에 따라 위치에 배치되는 목록의 맨 아래에 배치됩니다.

jQuery를 사용하는 방법 defaultbanner의 클래스 이름을 가진 모든 항목을 # sortable2의 목록 맨 위로 옮길 수 있습니까?

내 코드는 아래하거나

$(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(); 
}); 

});

출처

2014-07-22 001221

예, 단지 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 
      } 
     });

데모의 마지막 호출로 의사 sorting 기능을 추가 내 JSFiddle

JS.js를 볼 수 있습니다 : http://jsfiddle.net/robschmuecker/J9eQL/2/

출처

2014-07-22 11:56:25

jQuery Sortable - 드래그 아웃하면 항목을 목록의 맨 위로 이동합니다.

답변

관련 문제