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 를 지정해 주면 된다. 

저작자표시

• 카카오스토리
• 트위터
• 페이스북

'웹프로그래밍 > js' 카테고리의 다른 글

jQuery 이용 json 으로 폼 값 입력  (0)	2011.08.25
textarea 내용을 javascript 이용하여 html 변환. 각 문장 p 태그 적용  (0)	2011.06.16
jQuery UI Sortable dropOnEmpty 유의사항  (0)	2011.06.07
커서위치에 글자 삽입 스크립트  (0)	2011.06.01
jQuery UI Dialog 에 따로 존재하는 html 페이지 로딩  (0)	2011.05.18
jQuery.noConflict() 사용시 플러그인 getInstance undefined 오류  (0)	2011.05.11