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

Program / 글쓴이

어떤 이유로 정렬 가능한 항목의 자리 표시자는 약 10px입니다. 정렬 가능한 모든 항목의 높이가 다릅니다. 이동중인 항목에 맞게 각 자리 표시 자의 높이를 변경하려면 어떻게해야합니까?

답변

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

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

참고 업데이트 된 테스트 케이스를

답변

forcePlaceholderSize:true속성 설정을 시도해 보셨습니까 ? jQuery UI Sortable 문서 페이지를 읽어보십시오 .

답변

당신의 요소 display: block입니까? 인라인 요소로 인해 자리 표시자가 높이를 올바르게 유지하지 못할 수 있습니다. 예 : 이 jsFiddle 은 설명한 것과 유사한 문제가있는 것 같습니다. 클래스에 추가하면 문제 display: block가 .portlet해결됩니다.

답변

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

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

답변

정렬 가능 옵션으로 자리 표시 자의 스타일을 설정할 수 있습니다.

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

그리고 그 스타일에 높이를 지정하십시오. 작동하기를 바랍니다.

답변

제 경우에는 JP Hellemons 와 유사한 솔루션을 찾았 습니다 . 자리 표시 자 높이 ( ! important 포함 )를 사용자 지정으로 강제 하고 배경으로 가시성을 설정하여 변경 사항을 확인합니다 (원하는 방식으로 자리 표시 자 스타일을 지정할 수도 있음). ).

이것은 또한 작동합니다 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

답변