jQuery UI Sortable dropOnEmpty 유의사항

items의 컨테이너 역할을하는 element의 높이는 items 가 empty 되었을 경우에도 지정되어  있어야 한다.

--------------
항목1
-------------- 
위에서 '항목1'을 빼버려서

--------------
--------------  
위와같이 되어버렸을 경우

dropOnEmpty : true (default)
이라 하더라도 drog over 하여도 드롭존이 보이질 않는다.

이때는

.ui-sortable {
    min-height: 20px; height:auto !important; height: 20px;
}

와 같이 컨테이너에 최소 높이를 부여해주어 해결 가능하다.

jQuery UI 사이트 예제에서는 padding: 5px 를 지정 하여 놓았다.

참고로 Drag Over 시에 드롭될 자리를 보여주는 방법은

.ui-sortable-placeholder { 
    border: 1px dashed black; background:yellow; visibility: visible !important; 
}

.ui-sortable-placeholder * { 
    visibility: hidden; 
}

위와같이 CSS clsss 를 지정해 주면 된다.