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项目的按钮和保存列表项目的顺序/状态的提交按钮。

我已经找到了很多关于拖放的信息（这不是必需的）但在这种功能上并不多。

Answer 1

您可能希望查看的内容是jQuery UI sortable

如果您只是想通过点击等移动项目，请查看以下方法：

detach功能

DOM insertion函数

$("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

使用拖放操作上下排序列表项

2 个答案: