Sortable jQuery UI list with buttons

button, javascript, jquery, jquery-ui, jquery-ui-sortable

Solution

Sortable provides a `cancel` selector to prevent sorting on specified elements. The default value includes `<button>` elements, and your sort handles are buttons, so sorting is prevented:

cancel Type: Selector Default: "input,textarea,button,select,option" Prevents sorting if you start on elements matching the selector.

To solve this, set the `cancel` selector to an empty string:

$('.sort').sortable({
  cancel: ''
});

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100px;
}

button {
  width: 100%;
}

<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<ul class="sort">
  <li><button>A</button></li>
  <li><button>B</button></li>
  <li><button>C</button></li>
</ul>

View on JSFIddle

Also, you can specify the draggable handles for `sortable()` by using the `handle` option:

$('.sort').sortable({handle:'button'});

But in your case, the entire content of each `<li>` element is a `<button>`, so you won't need to specify it.

Problem

Following the examples in the jQuery UI demo and documentation, I'm using this HTML: ``` <ul class="sort"> <li> <button>A</button> </li> <li> <button>B</button> </li> <li> <button>C</button> </li> </ul> ``` And this JS: ``` $(function () { $('.sort').sortable(); }) ``` But as seen in this JSFiddle example, the buttons are not drag-able. How can I make .sortable() work with buttons?

Original source