jqueryui 시작 이벤트 전에 정렬 가능

Question

정렬 가능한 시작 이벤트 전에 일부 데이터를 추가하려고합니다. 여기 내 예를

<ul id="sortable"> 
    <li class="ui-state-default">Item 1</li> 
    <li class="ui-state-default">Item 2</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
</ul> 

JS 코드

$("#sortable").sortable({ 
      revert: true, 
     forcePlaceholderSize: true, 
     placeholder: "ui-state-highlight", 
     start: function(event, ui) { 
     $(ui.item).append("<div>abc<br><br>abc</div>"); 
     } 
     }); 

내가이 항목 1을 드래그하면 그것은

처럼하지만 난이 자리 크기 조절을 시작하기 전에 데이터를 추가 할 수 있습니다. 하지만 아마도 jquery UI에는 그 사건이 없습니다. j 감사합니다. 감사합니다.

Here이 나의 예입니다.

Answer 1

먼저 요소의 높이를 재설정해야합니다. 그런 다음 새로운 높이를 자리 표시 자 요소에 적용해야합니다. 코드 :

$(function() { 
    $('#sortable').sortable({ 
    revert: true, 
    forcePlaceholderSize: true, 
    placeholder: 'ui-state-highlight', 
    start: function(event, ui) { 
     // we don’t want jQuery’s 20px 
     ui.item.height('auto'); 
     ui.item.append('<div>abc<br><br>abc</div>'); 
     // now set the new height to the placeholder 
     $(ui.placeholder[0]).height(ui.item.height()); 
    } 
    }); 
});