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

Question

我在一个display:flex父div中有一堆div。父div可以使用jquery的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的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>

​