如何使可拖动的可排序列表在拖动时显示其他内容？

Question

我一直在用jQuery ui处理可排序列表，并且不确定如何将要拖动的元素临时调整为拖动进行排序时通用的元素。

如果要排序的元素很大，则拖动大元素会很尴尬。如果您要拖动某种较小的“列表项”文本，则会更容易看出来。

示例代码：HTML：

<div>Sortable List 1
<ul class="sortableList">
    <li class="ui-state-default large-box">Item 1</li>
    <li class="ui-state-default large-box">Item 2</li>
    <li class="ui-state-default large-box">Item 3</li>
    <li class="ui-state-default large-box">Item 4</li>
    <li class="ui-state-default large-box">Item 5</li>
</ul>

CSS：

.large-box
{
  height:100px;
}

JS：

$(document).ready(function () {
    $(".sortableList").sortable({
        revert: true,
        placeholder: 'sortable-placeholder',
    });
});

https://jsfiddle.net/0jqwapg7/

请注意，框的尺寸非常大，因此拖动时很难看清。我想在拖动时临时使用通用的较小元素（例如，只有25px高的文本元素，上面写着“列表项”），这样更容易看清，然后放到适当位置时再使用普通元素。

我将如何完成？

Answer 1

您需要设置开始和停止事件并为占位符创建一个CSS

.sortable-placeholder {
  height: 100px;
  width: 100%;
  background-color: grey;
}