jQuery UI sortable js - move element to last of the list when a button is clicked

Question

I'm a bit new to Sortable JS, I'm able to render a list of items along with drag and change the element position. But I'm trying to move the element to last index position when the user clicks on a button that is there for each row in the list. Can anyone let me know how can this be done (or) any example on how to update the sort order will help dynamically.

Here is what I looked (example)for an example, but could not get what I was looking for.

Thanks in advance.

score 0 · Accepted Answer · answered Dec 03 '18 at 05:56

On clicking a button just remove the li element and append it to the end of the list.

$(function(){
    $("#sortable").sortable();
    $("button").on("click",function(){
        $("#sortable").append($(this).parent().remove());
    });
  });

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; border:1px solid;}
#sortable li span { position: absolute; margin-left: -1.3em; }
button { float:right;}

<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>
 
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7<button>Send to bottom</button></li>
</ul>

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

I suspect there are a few ways to accomplish this. You can look at .detach() and .clone() too. Whatever you do, when it's done, you must call .sortable("refresh") so that the new order is updated.

refresh()

Refresh the sortable items. Triggers the reloading of all sortable items, causing new items to be recognized.

Example

$(function() {
  $("#sortable").sortable();
  $("#sortable button").button({
    classes: {
      "ui-button": "ui-sm-btn"
    },
    icon: "ui-icon-arrowthickstop-1-s",
    iconPosition: "top",
    showLabel: false
  }).on("click", function() {
    var item = $(this).parent().detach();
    $("#sortable").append(item).sortable("refresh");
  });
});

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

#sortable li {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
  border: 1px solid;
}

#sortable li span {
  position: absolute;
  margin-left: -1.3em;
}

#sortable li button.ui-sm-btn {
  border-radius: 3px;
  float: right;
  width: 20px;
  height: 20px;
  line-height: 10px;
  padding: 0;
}

#sortable li button.ui-sm-btn span {
  margin: -8px 0 0 -8px;
}

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

<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6<button>Send to bottom</button></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7<button>Send to bottom</button></li>
</ul>

Hope that helps.

jQuery UI sortable js - move element to last of the list when a button is clicked

2 Answers2