sortable 및 draggable jQueryUI를 사용하여 정렬 할 수있는 요소에 대한 컨테이너 인라인 블록 요소를 도약

Question

관련 질문 stackoverflow 0 및 1. JSFiddle :

$(".fields").sortable({ 
     connectedWith: ".fields", 
     revert: true, 
    }); 

P.S. : http://jsfiddle.net/ashugupt/hpncs/1/

또한 아래와 같이 정렬하려고 스냅 샷과 마찬가지로 녹색 div의 아래쪽 (빨간색과 녹색 사이)으로 드래그해야합니다.

Answer 1

의견에서 언급했듯이이 solution이 적합합니다.

는 기본적으로 내가 나를 위해 일한 .ui-정렬-자리에 부정적인 마진 - 하단에 추가

float: left; 

Answer 2

에

display: inline-block; 

에서 구조를 변경했습니다. 금액이 라인 높이와 관련되어 있으므로 번호와 함께해야 할 수도 있습니다.

.ui-sortable-placeholder { 
    margin-bottom:-15px 
}