Как сделать так, чтобы перетаскиваемый, сортируемый список отображал что-то еще во время его перетаскивания?

Question

Я возился с сортируемыми списками с jQuery пользовательским интерфейсом, и не уверен, как временно настроить перетаскиваемый элемент на что-то общее, c при перетаскивании для сортировки.

Если элементы, которые вы сортируете, очень большие, перетаскивать большой элемент становится неловко. Было бы легче увидеть, если бы вы вместо этого перетаскивали какой-то текст с надписью «Элемент списка», который был меньше.

Пример кода: 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/

Обратите внимание, что коробки очень большой, и это затрудняет просмотр при перетаскивании. Я хочу использовать обычный c меньший элемент временно (например, текстовый элемент размером всего 25px с надписью «Элемент списка») при перетаскивании, чтобы его было легче увидеть, а затем нормальный, когда он помещен на место.

Как бы я совершил sh это?

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");

    }
    });
});

Answer 2

Ответ заключается в том, чтобы установить функцию для 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/

Answer 3

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