두 열의 CSS jQuery UI Sortable 서로 다른 크기의 요소를 처리하는 목록 격자

Question

끌어서 놓기의 두 열 정렬을 가져 오려고합니다. http://jsfiddle.net/elidickinson/hjnkg/

은 기본적으로 내가 격차를 제거하려면 : 나는 여기에 코드와 예제입니다 float:left과 <ul>

폭의 절반이다 단일 <ul> 및 <li>의와 jQuery를 UI의 SortableList을 설정할 수있어 그 jsfiddle 링크에서 item3과 item5 사이. 나는 그 요소들 중 하나를 드래그 할 수 있고 어떤 내부 틈도 남기지 않기를 원한다.

CSS에서이 문제를 해결할 수있는 확실한 방법이 없으므로 가장 좋은 생각은 오른쪽 열에 나타나는 "키가 큰"항목을 찾아서 float:right으로 전환하는 JS를 작성하는 것입니다. 그게 문제를 해결해야하지만, 나는 더 우아한 해결책을 기대하고있다.

저는 두 개의 별도 컬럼을 사용하지 않고 플로트없이 다른 접근법에 대해서도 열려 있습니다. 저것은 "큰 품목"을위한 문제를 해결한다 그러나 나는 2 개의 란을 채택하는 "넓은"품목을 취급하기 위하여 약간 CSS 마술을 가지고 갈 것이라고 생각한다.

Answer 1

기존의 플러그인은 드래그 가능한 정렬을 허용하지 않습니다. 내가 찾을 수있는 가장 가까운 것은 http://isotope.metafizzy.co/index.html이며 버튼 방식으로 정렬 할 수 있습니다. 이것은 누군가가 아직 착수하지 않았다고 생각하는 정말 복잡한 문제입니다. 적어도 공개적으로는 아닙니다. 여기 동위 원소의 창조자에서 게시물입니다 : 당신이 자리 표시 자와 동일한 크기를 얻을 같은 것을 수행하려는 경우 http://metafizzy.co/blog/mythical-drag-drop-multi-column-grid-plugin/

Buuttttt을, 다음은

$('#list').sortable({ 
     placeholder: "ui-state-highlight", 
     tolerance:'pointer', 
     start: function (event, block) { 
      // set the placeholder size to the block size 
      $('.ui-state-highlight').css({ 
       'width':$(block.helper).outerWidth(), 
       'height':$(block.helper).outerHeight() 
      });    
     } 
    }); 

Answer 2

를 A는 매우 자바 스크립트 솔루션의 버전을 함께 해킹 것 내 질문에 제안했다. 그것은 작동하는 것처럼 보이지만, 그것은 꽤 예쁘지 않습니다. 여기에는 jsFiddle에 있습니다 http://jsfiddle.net/elidickinson/tRjDM/

function update_columns() { 
    var column = 1; 
    var orient_1past = ''; 
    var orient_2past = ''; 
    $("#dashboard-layout .item").each(function() { 
     var $item = $(this); 
     var orient_current = 'normal'; 
     if ($item.hasClass('wide')) { 
      orient_current = 'wide'; 
     } 
     if ($item.hasClass('tall')) { 
      orient_current = 'tall'; 
     } 

     if ((orient_2past == 'tall') || (orient_1past == 'wide') || orient_1past == '') { 
      // do nothing 
     } 
     else { 
      // move to next column 
      column = (column == 1) ? 2 : 1; 
     } 

     // remove any existing columns classes 
     $item.removeClass('column1').removeClass('column2'); 

     // add class for calculated column 
     $item.addClass('column' + column) 

     // keep track of previous two item orientations     
     orient_2past = orient_1past; 
     orient_1past = orient_current; 
    }); 
} 

플러스 일부 CSS 규칙처럼 :

.item.column1 { float: left; } 
.item.column2 { float: right; } 

Answer 3

우리는 성공하여 sortable 함수의 change 옵션을 사용하여 비슷한 (하지만 동일하지 않음) 문제를 해결했다. 우리의 문제는 두 열 목록에 "높이"LI 요소가 몇 개 있었고 그 첫 번째 열에 해당 높이 요소가있을 때 다른 모든 항목이 두 번째 열에 쌓일 것이기 때문에 모든 LI 요소는 float: left . 이것은 정렬 할 때 매우 이상한 상호 작용을합니다.

문제를 해결하려면 첫 번째 열 (모든 홀수 요소)의 모든 LI 요소에 clear: both을 적용 할 수 있지만 목록에 여분의 LI 요소가 있기 때문에 정렬 중간에 문제가 발생합니다 절대 위치 지정 (하나는 드래그 됨)을 사용하여 짝수 및 홀수 선택기를 제거합니다.

해결 방법은 정렬 중에 DOM이 변경 될 때마다 호출되는 change 콜백을 사용하는 것이 었습니다. 그런 다음 jquery를 사용하여 실제로 첫 번째 열에있는 LI 요소를 정확하게 파악하고 해당 요소에 clear: both을 적용 할 수 있습니다.

 function setClearsOnFirstColumn() { 
     var colNum = 0; 
     $(".myList").find("li:not(.ui-sortable-helper)").each(function() { 
      var thisLiEl = $(this); 

      if(colNum == 0) 
       thisLiEl.css("clear", "both"); 
      else 
       thisLiEl.css("clear", "none"); 

      colNum ++; 
      if(colNum == 2) colNum = 0; 
     }); 
    } 

    $(".myList").sortable({ change: setClearsOnFirstColumn, stop: setClearsOnFirstColumn }); 

셀렉터의 not 부분은 첫 번째 열에서 LI 요소가 결정할 때 (.ui-sortable-helper 그 클래스에 의해 식별) 드래그되는 LI 요소를 무시하는 역할을한다.(심지어 짝수 및 홀수 jquery 선택기를 사용하여이를 단축 할 수 있습니다 - 목록에서 두 개 이상의 열을 지원하기 위해보다 일반적인 경우에서 스 니펫을 적용했기 때문에 여기서는 수행되지 않습니다.)

참고 사항