[javascript/jquery] 드래그 앤 드롭 항목이동

<link rel="stylesheet" href="jquery/css/jquery-ui.css">
<style type="text/css">
 #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
  .col { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 450px; height: 25px; font-size: 10pt; text-align: center; }
</style>

<ul id="sortable">
  <li id="f1" data-colnum="" class="ui-state-default col">
    데이터1
  </li>
  <li id="f2" data-colnum="" class="ui-state-default col">
    데이터2
  </li>
  <li id="f1" data-colnum="" class="ui-state-default col">
    데이터3
  </li>
</ul>

<script src="jquery/jquery-3.3.1.min.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script type="text/javascript">
$( function() {
  $("#sortable").sortable({
    update: function(event, ui) {//수정
    }
  });
  $("#sortable").disableSelection();
} );
</script>