jQuery UI sortable의 placeholder가 요소를 푸시합니다.

Question

webshop 시스템의 이미지 관리자 개념을 연구 중입니다. 요구 사항의 일부는 제품 레벨에서 해당 제품의 이미지를 업로드 할 수 있고 이미지를 드래그 (정렬)하여 이미지가 제품 페이지에 표시되는 순서를 선택할 수 있다는 것입니다.

내 문제는 내가 요소에 대한 자리 표시자를 사용하는 것입니다, 그 요소는 이미지의 다음 줄/행에 요소를 추진하고있다.

정렬 가능한 코드 :

$('.product-image-manager').sortable({ 
    handle: '.fa-arrows', 
    helper: 'clone', 
    items: '> .image-container', 
    placeholder: 'image-placeholder', 
    start: function(event, ui) { 
     ui.placeholder.height(ui.item.height()); 
     ui.placeholder.html('<div class="inner-placeholder"></div>'); 
    } 
}); 

Full example

Answer 1

당신은 그냥 변경해야 이것에

.product-image-manager > .image-container { 
    padding: 8px; 
    float: left; 
    vertical-align: top; 
} 

:

.product-image-manager > .image-container { 
    padding: 8px; 
    display: inline-block; 
    vertical-align: top; 
}