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

93

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

jquery jquery-ui jquery-ui-sortable

— 오시로와 넨
소스

jsFiddle에 게시 할 수 있습니까?

— 사티

항목을 다른 위치로 끌어다 놓으면 이런 일이 발생합니까? 또는 페이지를로드 한 후 항목이 이미이 높이를 가지고 있습니까? 어쨌든 여기를보세요 : bugs.jqueryui.com/ticket/4482 그리고 언급 된대로 해결 방법을 시도 하십시오

— Mohammad

250

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

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

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

— Mekwall
소스

21

나는 개인적으로 인해 요소의 실제 높이를 기울 마진과 패딩 몇 가지 문제에 ui.helper.outerHeight ()와 ui.item.height ()를 대체했다

— oshikryu

미안하지만 잘 작동하지 않는다고 생각합니다.이 링크 jsfiddle.net/t8gcZ/1 에서 자리 표시 자 높이는 항목 높이 (237px)와 동일하지만 시작시에는 아래 항목이 쓰레기 위로 이동하는 것을 볼 수있었습니다

— Makio

@Makio 그것은 패딩 바닥 때문입니다. 자리 표시 자에 padding-bottom을 추가하면이 문제가 해결됩니다. jsfiddle.net/t8gcZ/136

— mekwall

15

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

— DarthJDG
소스

2

나는 그것을 시도했지만 참 또는 거짓을 추가해도 10px 높이로 유지하는 원래 사이트에는 아무런 차이가 없습니다. 이 jsfiddle에서는 크기가 올바르게 조정되지만 forceplaceholdersize를 true 또는 false로 설정해도 차이가 없습니다. jsfiddle.net/t8gcZ

— oshirowanen

@oshirowanen : 어떤 브라우저에서 테스트하고 있습니까?

— DarthJDG 2011-06-03

@oshirowanen : 실제로 손상된 코드에 대한 링크를 게시 할 수 있습니까?

— DarthJDG

2

그것은 나를 위해 작동합니다. 내가해야 할 일을했을 모두는 CSS 변경했습니다 .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }에 .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; }바로 있습니다 (그래서 높이를 제거) 그래서 @DarthJDG를!

— JP Hellemons 2011

높이 만 동적이 아닌 경우 작동 @JPHellemons

— Erdal은 G.

2

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

— Gijs
소스

플로팅 요소도 마찬가지입니다. 목록 요소가 부동 인 경우 자리 표시 자도 부동해야합니다.

— Adrian Marinica 2013 년

2

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

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

— 엘란 체 지안 나라야나 사미
소스

1

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

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

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

— MANATTWeb
소스

2

하지만 높이가 고정되지 않습니까? 콘텐츠와 같은 높이가 필요합니다.

— oshirowanen 2011-06-05

1

제 경우에는 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

— user3780666
소스