无法通过更改元素的位置使 JQuery UI 可排序正常工作

Question

$(".sortable").sortable({
      connectWith: ".sortable"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class='container-fluid'>
<div class='row sortable'>
    <a class='btn btn-primary col-6'>A</a>
    <a class='btn btn-primary col-6'>B</a>
    <a class='btn btn-primary col-6'>C</a>
</div>
</div>

我正在尝试让按钮相互替换位置，所以如果我将 button C 拉到 button A 我希望它能相互交换位置，但实际情况是button C 进入 button A 的位置并按下所有按钮，但我只想让它们互相替换，而不是重新排序。

平时的样子：

A B
C

当我将 C 拉到 A 的位置时我想要发生什么：

C B
A

实际发生了什么：

C A
B

如何替换而不是推送？

Answer 1

正如我提到的，最好使用 Draggable 和 Droppable 来执行交换功能。 Sortable 旨在允许您将列表中的顺序或项目更改为列表中的任何其他位置。

这是一个例子：

$(function() {
  $(".row .droparea").droppable({
    accept: ".btn",
    classes: {
      "ui-droppable-hover": "active"
    },
    drop: function(e, ui) {
      var si = ui.draggable.data("start");
      $(".btn", this)
        .detach()
        .appendTo($(".droparea").eq(si));
      ui.draggable.css({
        top: "",
        left: ""
      }).appendTo($(this));
    }
  });

  $(".row .btn").each(function(i, el) {
    $("<i>", {
      class: "fas fa-arrows-alt fa-fw drag-handle",
      style: "display: inline-block; width: 17px; height: 100%; margin-left: -17px;",
      title: "Click to Drag"
    }).appendTo($(el)).position({
      my: "right center",
      at: "right-3 center",
      of: $(el)
    });
    $(el).draggable({
      containment: ".row",
      handle: ".drag-handle",
      opacity: 0.45,
      zIndex: 1000,
      start: function(e, ui) {
        ui.helper.data("start", $(this).parent().index());
      }
    }).disableSelection();
  });
});

.row .btn {
  width: 100%;
}

.row .btn .drag-handle {
  color: #0094ff;
}

.row .active .btn {
  border: 1px dashed #212529;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class='container-fluid'>
  <div class='row'>
    <div class="droparea col-6">
      <a class='btn btn-primary'>A</a>
    </div>
    <div class="droparea col-6">
      <a class='btn btn-primary'>B</a>
    </div>
    <div class="droparea col-6">
      <a class='btn btn-primary'>C</a>
    </div>
  </div>
</div>

使用 .droparea 包装器，我们可以为要拖动的 .btn 创建位置。当我们放下 .btn 时，它会交换两者。

例如，如果我们将 C 拖到 A 位置，则 A 会分离，而 re-attached 会拖到 C 所在的位置。然后附加 C 代替 A。

为用户提供更多反馈，让他们知道何时可以放下按钮这一点很重要。我添加了其中的一些，还使用了 Font Awesome 来创建手柄图标。如果您打算维护按钮 click 功能，则手柄图标有点重要。 click 不应该在 mousedown 上冒泡，但这只是让用户更清楚也更清楚。

无法通过更改元素的位置使 JQuery UI 可排序正常工作

Can't make JQuery UI Sortable work properly by Changing places with the Element

html

jquery-ui

bootstrap-grid