JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<ul id='plan'>
  <li class='item'>1</li>
  <li class='item'>2</li>
  <li class='item'>3</li>
  <li class='item'>4</li>
</ul>
<button id="add">add</button>
<p>
    Clicking the "Add" button should move item 2 after item 3 (i.e. they switch positions).<br>
    After that the defined "update" callback from the sortable is called and should add the text " (update called)" to the moved item.<br>
    Pushing the button twice would then lead to " (update called)" being attached to item 2 and 3.
</p>

JavaScript

$('#plan').sortable({
  update:function(event, ui){
    ui.item.append(' (update called)');
  }
});

$('#add').click(function() {
  var moveFromIndex = 1;
  var moveToIndex = 2;
  var $moveItem = $("#plan li:eq(" + moveFromIndex + ")");
  $('#plan').sortable('option','update')(null, {
    item: $($moveItem).before($("#plan li:eq(" + moveToIndex + ")"))
  });
});