다른 높이 열을 정렬 할 수 없습니다.

Question

이 라이브러리로 작업하고 있습니다 : HTML5 Sortable Drag and Drop.

블록 2 열 너비로 사용하고 있습니다. 그것에 대한 마크 업 :

<ul class="sortable grid"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li style="height: 200px;">Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li style="height: 200px;">Item 7</li> 
    <li>Item 8</li> 
</ul> 

그래도 문제가 있습니다. 특정 블록의 높이가 다른 경우 두 번째 블록 다음에 float을 제거해야 레이아웃을 망칠 염려가 없습니다. 사람이 어떤 아이디어가있는 경우

는 라이브 데모 여기서 일하는 http://jsfiddle.net/jasondavis/4njSE/6/ 있습니다. 이상한 li 목록 항목을 선택기로 .sortable>:nth-child(odd) {clear:left}을 시도했는데이 방법이 현명하게 작동하지만 드래그 앤 드롭의 기능이 엉망입니다. 항목을 놓을 때 올바른 위치로 이동하지 않습니다.

이 JSFiddle 그것이 .sortable>:nth-child(odd) {clear:left} 작업 http://jsfiddle.net/jasondavis/4njSE/7/

과 아이디어를 추가 보여줍니다? 나는 지금 당장 패배하고있다.

나는 또한 거기에 도움이되는 자신의 컨테이너 안에있는 모든 2 세트의 블록을 래핑하려고했지만 라이브러리가 컨테이너 div에 dragable을 추가함에 따라 드래그 앤 드롭이 올바르게 작동하지 않습니다. 여기

.sortable>:nth-child(odd) {clear:left} 

Answer 1

우리가 갈 :

Answer 2

이 CSS 추가

이

는 볼 방법의 목표의 이미지입니다 먼저

을 - working jsfiddle example .

기본적으로 두 개의 이벤트 콜백을 onStartDrag 및 onEndDrag 플러그인에 추가했습니다. 이들은 addFloats 함수를 호출합니다.이 함수는 이 요소 인 sortable-dragging 요소가 아닌 홀수 요소에 부동 소수점을 더하는 역할을합니다 (순수 CSS로 구현할 수는 없습니다). 우리는 또한 sortable 플러그인을 호출 할 때 그 함수를 호출해야했지만, 그것에 관한 것입니다.

즐기십시오 :)