Вызвать событие после сортировки в JQuery

Question

Текущая проблема

---

При повторном запуске jQuery / jQueryUI я пытаюсь вызвать событие для элемента после его сортировки.Это, вероятно, относительно просто сделать, поскольку в jQuery есть много способов реализовать обратные вызовы.

jQuery(document).ready(function($) {
  $('ul').addClass('list-unstyled');
  $('.sortable').sortable({
    revert: true,
    connectWith: ".sortable"
  });
});

ul {
  margin: .8rem 2rem !important;
}

li {
  margin: 0;
  padding: 0;
}

div>div {
  border: 1px solid #999;
  margin-bottom: 2px;
}

body {
  padding: 1rem;
}

.sortable {
  cursor: pointer;
}

.sortable>div:hover {
  background: #f0f0f0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" integrity="sha256-Bxxp5LTCU2v12w2d0kxKb0vt5F4EgtrzcJKJSR3Xxio=" crossorigin="anonymous"></script>

<div class="sortable">
  <div>
    <ul class="1">
      <li>test 1</li>
      <li>test 2</li>
    </ul>
  </div>
  <div>
    <ul class="2">
      <li>test 3</li>
      <li>test 4</li>
    </ul>
  </div>
</div>
<div class="sortable">
  <div>
    <ul class="3">
      <li>test 7</li>
      <li>test 8</li>
    </ul>
  </div>
  <div>
    <ul class="4">
      <li>test 9</li>
      <li>test 0</li>
    </ul>
  </div>
</div>

Итак, допустим, я переместил список 3/4.Я хочу выполнить обратный вызов (для изменения фона или размера шрифта) после завершения перемещения элемента.

Edit (s)

---

• 20101019-1145EST: Я думаю, мне нужно быть более ясным.Я пытаюсь вызвать событие для определенного элемента, который отсортирован.Я думаю, что я мог бы использовать функцию sort / change, но разве не должно быть условное участие?Это включает в себя больше, чем просто добавление класса, конечная функция, которую я планирую присоединить, будет выполнять некоторые AJAX, а также некоторые вычисления.

Answer 1

Используйте событие stop плагина sortable.

Это событие инициируется, когда сортировка остановлена.

В вашем примере

$('.sortable')
    .sortable({
       revert       : true,
       connectWith  : ".sortable",
       stop         : function(event,ui){ /* do whatever here */ }
    });

Answer 2

Список событий для плагина jquery ui sortable можно найти здесь: http://jqueryui.com/demos/sortable/#events

Answer 3

Документацию по событиям можно найти здесь: http://jqueryui.com/demos/sortable/

Полагаю, вы захотите использовать событие sort или change.

Answer 4

$(function() {   
    $('#sortable').sortable( { 
        revert    : true,
        connectWith  : ".sortable",
        stop     : function(event,ui){ 
              //write ur function here
        }
    });
});