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はそのイベントを持っていません。 jHow私はそれに感謝することができます。

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()); 
    } 
    }); 
});