jQuery를 가져올 수 없습니다. 열이없는 상태로 정렬 할 수 있습니다.

jQuery를 정렬 할 수 없었습니다. 나는 원래 정렬에 따라 Nettuts tutorial을 시도했지만 대시 보드 레이아웃의 열 메서드가 너무 수축 된 것을 발견했습니다. 나는 그래프 등을위한 두 배의 넓은 위젯을 갖고 싶었습니다. 그래서 고정 된 폭의 부모 위젯 div가 있고 열을 사용하지 않습니다. 고정 너비는 2 개의 일반 위젯 또는 1 개의 더블 와이드 위젯에 맞출 수 있습니다. 위젯은 컨테이너 내에서 멋지게 둘러 싸고 위젯이 포함 된 순서 만 정렬 할 수 있기를 원합니다.jQuery를 가져올 수 없습니다. 열이없는 상태로 정렬 할 수 있습니다.

문제는 정렬 가능한 동작입니다. 위젯을 드래그 앤 정렬 할 수 있지만 클릭 및 드래그가 발생하면 자리 표시자가 올바른 위치에 있지 않습니다. 아래쪽 위젯 핸들을 잡고 이동하면 자리 표시자가 상단에 나타나고 widget 컨테이너의 너비 (위젯)는 위젯 자체가 아닙니다. 자리 표시자가 열에서 너비를 가져올 수있는 열을 볼 수는 있지만 내 경우에는 왼쪽/위쪽 위치조차 올바르지 않습니다. 자리 표시자는 위젯 컨테이너의 맨 위에 있습니다.

플러스 애니메이션은 항상 위젯을 위젯 컨테이너의 왼쪽 상단으로 이동합니다. 삽입 지점 또는 이전 위치가 왼쪽 상단이었고 삽입 위치 또는 이전 위치가 아니라고 생각합니다.

나는 여기에 뭔가 빠졌어. 정렬 가능한 메서드가 연결된 곳을 변경하려고 시도했지만 아무 것도 변경하지 않습니다. 어떤 도움을 주시면 감사하겠습니다!

렌더링 된 HTML의 덩어리 :

<div id="widgets" class="span9"> 
    <div class="widget span8"> 
    <div class="widget-head"> 
     <h4>Demo Activity 1</h4> 
    </div> 
    <div class="widget-content"> 
     <p>The content...</p> 
    </div> 
    <div class="widget-bottom"></div> 
    </div> 

    <div class="widget span4"> 
    <div class="widget-head"> 
     <h4>Demo Activity 2</h4> 
    </div> 
    <div class="widget-content"> 
     <p>The content...</p> 
    </div> 
    <div class="widget-bottom"></div> 
    </div> 

    <div class="widget span4"> 
    <div class="widget-head"> 
     <h4>Demo Activity 3</h4> 
    </div> 
    <div class="widget-content"> 
     <p>The content...</p> 
    </div> 
    <div class="widget-bottom"></div> 
    </div> 

</div>

기본 틀 CSS 그래서 나는 실제로 그것을 볼 수 있습니다

.widget-placeholder { 
    border: 2px dashed #333; 
}

정렬 설정하는 JS의 클립 :

$sortableItems = $('> div', '#widgets'); 

    $sortableItems.find('.widget-head').css({ 
     cursor: 'move' 
    }).mousedown(function (e) { 
     $sortableItems.css({width:''}); 
     $(this).parent().css({ 
      width: $(this).parent().width() + 'px' 
     }); 
    }).mouseup(function() { 
     if(!$(this).parent().hasClass('dragging')) { 
      $(this).parent().css({width:''}); 
     } else { 
      $('#widgets').sortable('disable'); 
     } 
    }); 

    $('.widget').sortable({ 
     items: $sortableItems, 
     connectWith: $('#widgets'), 
     handle: '.widget-head', 
     containment: $('#widgets'), 
     revert: 300, 
     delay: 100, 
     opacity: 0.8, 
     placeholder: 'widget-placeholder', 
     containment: 'document', 
     forcePlaceholderSize: true, 
     start: function (e,ui) { 
      $(ui.helper).addClass('dragging'); 
     }, 
     stop: function (e,ui) { 
      $(ui.item).css({width:''}).removeClass('dragging'); 
      $('#widgets').sortable('enable'); 
     } 
    });

을

출처

2012-03-24 garlicman

자리 표시 자 클래스에 float: left;을 추가하면 정렬 할 수있는 열에 올바른 순서로 표시됩니다.

.widget-placeholder { 
    border: 2px dashed #333; 
    float: left; 
}

출처

2012-07-03 01:47:49

jQuery를 가져올 수 없습니다. 열이없는 상태로 정렬 할 수 있습니다.

답변

관련 문제