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>

以编程方式对可排序的jquery-ui进行排序？

1 个答案: