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

【问题标题】：How do I make a draggable, sortable list display something else while it's dragging?如何使可拖动的可排序列表在拖动时显示其他内容？
【发布时间】：2020-04-26 12:28:17
【问题描述】：

我一直在使用 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 像素高的文本元素，上面写着“列表项”），这样更容易看到，然后放在适当的位置时正常。

我将如何做到这一点？

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-sortable

【解决方案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");

    }
    });
});

【讨论】：

【解决方案2】：

$(document).ready(function () {
    $(".sortableList").sortable({
        revert: true,
        placeholder: "sortable-placeholder",
        start: function (event, ui) {
          ui.item.toggleClass("sortable-placeholder");
        },
        stop: function (event, ui) {
          ui.item.toggleClass("sortable-placeholder");
        }
    });
});

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

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

【讨论】：

如果我在拖动项目 1，我希望它成为一个被拖动的小元素。不是将要删除的位置的样式。我意识到我在这里使用了占位符这个词有两种不同的含义

【解决方案3】：

答案是为helper 设置一个函数，最好与占位符一起使用。

JS：

$(".sortableList").sortable({
    revert: true,
    helper: function(e, ui) { return $("<div class='helper'>List Item</div>"); },
    placeholder: 'sortable-placeholder'
});

CSS：

.large-box
{
  height:100px;
}

.helper
{
  font-weight:bold;
  color:#333;
  vertical-align:middle;
}

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

https://jsfiddle.net/tq2c0f7w/

【讨论】：