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

jqueryui 在开始事件之前可排序

jqueryui sortable before start event

javascript

jquery

jquery-ui

jquery-ui-sortable