jQueryUI의 sortable dropOnEmpty가 작동하지 않습니다.

Question

경쟁 업체가 이벤트를 위해 응원하는 어플리케이션이 있습니다. 분대 사이에서 경쟁자를 이동시키는 UI는 jQuery-UI의 아코디언과 정렬 가능한 위젯을 사용합니다. 아코디언은 처음에는 붕괴되고 각 머리글에는 분대 번호와 분대의 경쟁자 수가 표시됩니다. 경쟁자를 이동시키기 위해, 경쟁자가 속한 분대와 목적지 분대가 확장됩니다. 경쟁 업체는 한 목록에서 다른 목록으로 끌고 각 쪽의 머리글에있는 개수가 업데이트됩니다. 경쟁자가 떨어질 때 목록은 자동적으로 의지된다. 경쟁자는 양쪽에서 다른쪽으로 드래그 할 수 있습니다.

이 모든 것은 모든 경쟁자가 팀에서 끌려 나올 때까지 훌륭하게 작동합니다. 그 후, 나는 더 이상 빈 대원으로 경쟁자를 떨어 뜨릴 수 없으며 그 이유를 알 수 없었습니다.

UI가 실제로 작동하는 모습을 보여주는 JSFiddle을 http://jsfiddle.net/jcwren/5V5HU/에 만들었습니다. 왼쪽 분대 2, 오른쪽 분대 1, 스쿠비, 샤기, 델마를 분대 1로 드래그하십시오. 이제 분대 1로 다시 가져가보십시오.

추가 보너스로, 경쟁자를 머리글에 놓아 유엔 확장 목록에 끌어다 놓을 수 있어야합니다. 빈 목록 문제가 나를 좌절 시켰기 때문에 많은 시간을 일하지 않으려 고 고백했습니다. (가 첨부 된 HTML없이 꽤 쓸모 있지만 ...)

코드 첫 번째 부분에 대한

$('.ulLeft, .ulRight').accordion({ 
    collapsible: true, 
    heightStyle: 'content', 
    active: 'none' 
}); 

// 
// Gets called once by the source ('remove') side, and once by the destination 
// ('receive') side. First we resort the ordered list items (which isn't really 
// necessary for the remove side, but we'll fix that later), then we replace the 
// HTML content of this side with the sorted contents (this side is expanded, we 
// see all the elements in it), and then we update the list on the opposite (which 
// will only be visible if we're moving to the same squad). We need to do this so 
// if that squad is expanded later, it will have the same list content. 
// 
function updateList(thisOL, oppositeOL) { 
    var squadNumber = thisOL.attr('squadnumber'); 
    var olNew = _.sortBy(thisOL.find('li'), function (li) { 
     return $(li).text(); 
    }); 

    thisOL.html(olNew); 
    $('.' + oppositeOL + '_' + squadNumber).html($(olNew).clone()); 

    _.each(['ulLeft', 'ulRight'], function (side) { 
     var ht = $('#h4_' + side + '_squad_' + squadNumber); 
     var sn = ht.html().replace(/\(\d+\)/, '(' + olNew.length + ')'); 
     ht.html(sn); 
    }); 
} 

// 
// Create sortables, connect left list to right, right list to left 
// 
$('.olLeft').sortable({ 
    connectWith: '.olRight', 
    cursor: 'move', 
    receive: function (event, ui) { 
     updateList($(this), 'olRight'); 
    }, 
    remove: function (event, ui) { 
     updateList($(this), 'olRight'); 
    } 
}); 

$('.olRight').sortable({ 
    connectWith: '.olLeft', 
    cursor: 'move', 
    receive: function (event, ui) { 
     updateList($(this), 'olLeft'); 
    }, 
    remove: function (event, ui) { 
     updateList($(this), 'olLeft'); 
    } 
}); 

$('.ulLeft, .ulRight, .olLeft, .olRight').disableSelection(); 

Answer 1

에 StackOverflow을 행복하게, 문제는 목록의 높이가 0이에서 다음과 같이 뭔가를 가하고 있다는 점이다 updateList 함수가 해당 문제를 해결합니다.

if (thisOL.children().length == 0) { 
    thisOL.height(10); 
} 

뿐인 : 보너스 질문에 대한 http://jsfiddle.net/5V5HU/14/