Search code examples
htmljquery-uibootstrap-grid

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

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

I'm trying to make the button replace places with each other, So if i pulled button C up to button A i expect it to swap each other place, But instead what happens is that button C enters the place of button A and push all buttons back, But I just want them to replace each other places and not reorder each other places.

usual look:

A B
C

What I want to happen When I pull C to the place of A:

C B
A

What actually happens:

C A
B

How can I make it replaced instead of pushed?

Solution

  • As I mentioned, it might be better to use Draggable and Droppable to perform a swap function. Sortable is designed to allow you to change the order or the item in your list to any other position in the list.

    Here is an example:

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

    Using the .droparea wrappers, we can make spots for a .btn to be dragged onto. When we drop the .btn, it then swaps the two.

    For example, if we drag C to the A position, A is detached and re-attached to position that C was at. C is then attached in place of A.

    Giving the user some more feedback, so they know when a button can be dropped is somewhat important. I added some of that and also used Font Awesome to create the handle icons. The handle icons are sort of import if you plan to maintain the buttons click functionality. click shouldn't bubble over mousedown, but this is just making it less ambiguous and also more clear to the user.