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没有这个事件。我可以怎么做，谢谢。

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