jquery 정렬 가능한 자리 표시자 높이 문제

jquery 정렬 가능한 자리 표시자 높이 문제

어떤 이유에서인지 제 정렬 가능한 항목의 자리 표시자는 약 10px입니다.나의 분류 가능한 모든 항목은 높이가 다릅니다.이동 중인 항목과 일치하도록 각 자리 표시자의 높이를 변경하려면 어떻게 해야 합니까?

나는 보통 자리 표시자의 높이를 이벤트에 정렬되는 항목의 높이로 설정하는 콜백을 바인딩하여 이 문제를 해결합니다.자리 표시자를 표시하는 방법을 세부적으로 제어할 수 있는 간단한 솔루션입니다.

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.item.height());
    }
});

업데이트된 테스트 사례 참조

설정해 보셨습니까?forcePlaceholderSize:true재산?jQuery UI Sortable 설명서 페이지를 읽어 봅니다.

"ui.item"을 사용하는 대신.height()"는 외부 컨테이너에서도 항목을 끌 때 "ui.helper[0].scrollHeight"를 사용하여 안정적인 결과를 얻을 수 있습니다.

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.helper[0].scrollHeight);
    }
});

당신의 요소는?display: block인라인 요소로 인해 자리 표시자가 높이를 올바르게 유지하지 못할 수 있습니다.예: 이 jsFiddle은 당신이 설명한 것과 유사한 문제가 있는 것 같습니다.추가 중display: block에게.portlet수업이 그것을 고칩니다.

저의 경우, 저는 JP Hellemons와 유사한 솔루션을 찾았습니다. 여기서 저는 자리 표시자의 높이(중요함 포함)를 사용자 지정에 적용하고 배경과 함께 가시성을 설정하여 변경 사항을 확인합니다(또한 원하는 대로 자리 표시자의 스타일을 변경할 수 있습니다).

이것은 또한 작동합니다.display: inline-block;

.ui-sortable-placeholder { 
     background:red !important; 
     height: 2px !important; // this is the key, set your own height, start with small
     visibility: visible !important;
     margin: 0 0 -10px 0; // additionaly, you can position your placeholder, 
     }                    // in my case it was bottom -10px

플레이스홀더의 스타일을 정렬 가능한 선택사항으로 설정할 수 있습니다.

$( "#sortable" ).sortable({
        placeholder: "ui-state-highlight"
});

그리고 그 스타일에 높이를 주어라.효과가 있기를 바랍니다.

언급URL : https://stackoverflow.com/questions/6140680/jquery-sortable-placeholder-height-problem