Сортировка элементов списка вверх и вниз без перетаскивания

Question

Я хочу, чтобы пользователь мог переупорядочивать список по событию клика. Вот мой код:

$(function() {

  $('#reOrder li').each(function, (index) {

    $(this).attr('id', index);

  });

  $("#reOrder").delegate("li", "click", function() {

    var $indexItem = $(this).index('#reOrder li');

    var $thisTxt = $(this).text();

    var $prevTxt = $(this).prev('li').text();

    $($thisTxt).replaceWith($prevTxt);

    //alert($thisTxt);

    //alert($prevTxt);

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="reOrder">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Так что в этом примере я хотел бы переместить элемент li с щелчком мыши и его содержимое в положение выше в DOM. Я полагаю, строго говоря, он перемещается вниз в индексе li элементов.

Это будет расширено позже, чтобы включить кнопки, которые перемещают элементы li вверх и вниз, и кнопку отправки, которая сохраняет порядок / состояние элементов списка.

Я нашел много информации о перетаскивании (что не обязательно), но не так много о такой функциональности.

Answer 1

Что-то, что вы, возможно, захотите проверить, - это jQuery UI sortable

Если вы просто хотите перемещать элементы, нажимая и т. Д., Посмотрите следующие методы:

отключение функция

вставка DOM функции

$("document").ready(function() {
    $("#reOrder li").click(function() {
        var index = $("#reOrder li").index(this);
        if (index != 0) {
           // li item is not sitting in the first position
           $("#reOrder li:eq(" + (index - 1) + ")").before(this);
        }
    });
});

Отделение позволит вам удалить выбранный элемент из DOM и будет иметьимеющуюся копию, вы можете затем вставить ее в нужную позицию, используя одну из функций вставки DOM.

Answer 2

$(function() {
  var $ul = $('ul');
  $ul.css({ position: 'relative', height: $ul.height(), width: $ul.width() });

  $ul.find('>*').each(function(i, e) {
    var $e = $(e);
    $e.data($e.position());
  }).each(function(i, e) {
    var $e = $(e);
    $e.css({ position: 'absolute', top: $e.data('top'), left: $e.data('left') });
  }).click(function(e) {
    var $e = $(e.target);
    var $be = $e.prev();
    if (!$be.length) return;
    $be.before($e).stop().animate($e.position());
    $e.stop().animate($be.position());
  });
});

http://jsbin.com/eduhaf/4/edit