以编程方式排序 jquery-ui 可排序？

Question

我在 display:flex 父 div 中有一堆 div。父 div 可以使用 jquery-ui 的sortable 函数进行排序。

除了允许用户排序​​之外，我还想添加一些按钮来进行动画排序。

例如，使用以下 HTML：

<div class="sortable">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
  <div id="div5"></div>
</div>

我想要一个按钮，当按下它时，将动画移动 div1 到 div4 和 div5 之间，平滑移动（事实上，有点不稳定，好像用手移动会更好）并移动所有 div通过，所以看起来好像是用手移动的。

这是否可以使用 jquery-ui 的 sortable()，或者我最好构建一个自定义解决方案？

Answer 1

考虑以下示例。

$(function() {
  function arrange(obj, pre) {
    obj = $(obj);
    var t = $("[id^='div']:eq(" + pre + ")");
    obj.animate({
      top: t.position().top + "px"
    }, {
      duration: 1000,
      step: function(i) {
        $(this).position({
          my: "left top",
          at: "left bottom",
          of: t,
        });
      },
      complete: function() {
        obj.detach().css("top", "").insertAfter(t);
      }
    });
  }

  $(".sortable").sortable().disableSelection();

  $("#arrange").click(function() {
    arrange($("#div1"), 3);
  });
});

.sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.sortable div {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  height: 18px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="sortable">
  <div id="div1" class="ui-state-default">Item 1</div>
  <div id="div2" class="ui-state-default">Item 2</div>
  <div id="div3" class="ui-state-default">Item 3</div>
  <div id="div4" class="ui-state-default">Item 4</div>
  <div id="div5" class="ui-state-default">Item 5</div>
</div>
<button class="btn" id="arrange">Arrange</button>

由https://css-tricks.com/jquery-ui-position-function/构建

更新

$(function() {
  function swap(a, b, ms) {
    console.log("Swap:", a.attr("id"), "with", b.attr("id"));
    a.animate({
      top: b.position().top + "px"
    }, {
      duration: ms,
      step: function(i) {
        $(this).position({
          my: "left top",
          at: "left bottom",
          of: b,
        });
      },
      complete: function() {
        a.detach().css("top", "").insertAfter(b);
      }
    });
  }

  function arrangeAfter(a, b) {
    var n = a.next();
    for (var c = parseInt(n.attr("id").slice(-1)); n.index() <= b.index(); c++) {
      swap(a, n, 400);
      n = $("#div" + (c + 1));
    }
  }

  $(".sortable").sortable().disableSelection();

  $("#arrange").click(function() {
    arrangeAfter($("#div1"), $("#div4"));
  });
});

.sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.sortable div {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  height: 18px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="sortable">
  <div id="div1" class="ui-state-default">Item 1</div>
  <div id="div2" class="ui-state-default">Item 2</div>
  <div id="div3" class="ui-state-default">Item 3</div>
  <div id="div4" class="ui-state-default">Item 4</div>
  <div id="div5" class="ui-state-default">Item 5</div>
</div>
<button class="btn" id="arrange">Arrange</button> <button class="btn" id="reset">Reset</button>