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

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/

请注意，这些框非常大，这使得拖动时很难看到。我想在拖动时暂时使用通用的较小元素(例如，仅 25 像素高的文本元素，上面写着“列表项”)，这样可以更容易查看，然后在放置到位时使用正常元素。

我该如何实现这个目标？

Answer 1

看看这是否有帮助，添加添加新类以使元素在拖动时变小，并在拖动完成时删除该类

jsfiddle 也在这里，例如 https://jsfiddle.net/cfw5j1nz/

$(document).ready(function () {
    $(".sortableList").sortable({
        revert: true,
        placeholder: 'sortable-placeholder',
        /*update: function (event, ui) {
            // Some code to prevent duplicates
        }*/

        start: function( event, ui ) { 
 /*         $(ui.item).removeClass("large-box"); */
            $(ui.item).addClass("small-box");
            },
       stop:function( event, ui ) { 
/*          $(ui.item).addClass("large-box"); */
            $(ui.item).removeClass("small-box");

    }
    });
});