0 

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

我怎样才能让它替换而不是推送？

4

1 回答 1

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包装器，我们可以为 a.btn拖上去。当我们删除 时.btn，它会交换两者。

例如，如果我们拖动C到该A位置，A则分离并重新附加到原来C的位置。C然后附加在A.

给用户一些更多的反馈，让他们知道什么时候可以放下一个按钮是很重要的。我添加了一些，还使用 ​​Font Awesome 来创建手柄图标。如果您打算保留按钮click功能，则手柄图标是一种导入。click不应该冒泡mousedown，但这只是让它不那么模棱两可，对用户来说也更清楚。

于 2018-04-05T06:19:25.250 回答