Question

＆＃13;

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

＆＃13;

<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>

＆＃13;

我试图让按钮替换彼此的位置，所以如果我将button C拉到button A，我希望它互相交换位置，但相反发生的是button C进入button A的位置并按回所有按钮，但我只是希望它们替换彼此的位置而不是重新排序。

通常看：

A B
C

当我将C拉到A的地方时，我想要发生什么：

C B
A

实际发生的事情：

C A
B

如何更换而不是推？

Answer 1

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

以下是一个例子：

＆＃13;

$(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();
  });
});

＆＃13;

.row .btn {
  width: 100%;
}

.row .btn .drag-handle {
  color: #0094ff;
}

.row .active .btn {
  border: 1px dashed #212529;
}

＆＃13;

<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>

＆＃13;

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

例如，如果我们将C拖到A位置，A将被分离并重新附加到C所处的位置。然后附加C代替A。

为用户提供更多反馈，因此他们知道什么时候可以删除按钮有点重要。我添加了一些并使用Font Awesome来创建句柄图标。如果您计划维护按钮click功能，则手柄图标会导入。 click不应该在mousedown上冒泡，但这只会使其不那么含糊，也会让用户更清楚。

通过使用元素

1 个答案: