정렬을 중지하고 자바 스크립트를 사용하여 TR의 위치를 변경

trojen_dev :

나는 정지에 정렬 및 재배치 (가) 모달에서 취소 버튼을 클릭 한 후 자바 스크립트를 사용하여 TR을 원한다. 그러나 나는 오류를 얻고 다음 코드를 실행하면,

캐치되지 않는 오류 : 정렬 이전에 초기화에 메소드를 호출 할 수 없습니다; 호출 방법으로 시도 '취소'

모달 :

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria- 
 labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
        </button>
      </div>
  <div class="modal-body">
    Do you really want to update the order?
  </div>
  <div class="modal-footer">
    <button id="cancel_update_order" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button id="update_order" type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

스크립트:

new Tablesort(document.getElementById('table'));

var fixHelperModified = function(e, tr) {
  var $originals = tr.children();
  var $helper = tr.clone();
  $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
  });
  return $helper;
  }


  updateIndex = function(e, ui) {
    $('#exampleModal').modal({
      backdrop: 'static',
      keyboard: false
    })

    $('#update_order').on('click', function() {
      $('td.index', ui.item.parent()).each(function (i) {
          $(this).html(i + 1);
      });
      $('#exampleModal').modal('hide');
    });

    $('#cancel_update_order').on('click', function() {
      $(this).sortable('cancel');
    });

  };

$("#table tbody").sortable({
  helper: fixHelperModified,
  stop: updateIndex
}).disableSelection();

freedomn-m :

이 오류가 발생하는 경우 :

캐치되지 않는 오류 : 정렬 이전에 초기화에 메소드를 호출 할 수 없습니다; 호출 방법으로 시도 '취소'

그것은 당신이 요구하는에 "취소"하고 있다는 가능성이 가장 높은 수단 다른 하나 개의 정렬이에 초기화 것보다 요소입니다.

이 경우,이 코드를 가지고 :

$('#cancel_update_order').on('click', function() { 
    $(this).sortable('cancel'); 
}); 

그 코드 내에서 "이", cancel_update_order에 버튼이 아닌 테이블을 의미합니다.

만 (정렬 하나가있는 경우 그 용도 외부 방법 updateIndex다음이 빠르게 정렬이 초기화 한 표를 참조하여 고정됩니다 :

$('#cancel_update_order').on('click', function() { 
    $("#table tbody").sortable('cancel'); 
}); 

당신이 더 재사용되고 싶은 경우에, 당신은의 사본을 보관해야합니다 "이"이 테이블에 언급 된 경우 :

updateIndex = function(e, ui) {

    var sortableElement = this;

    $('#cancel_update_order').on('click', function() {
      $(sortableElement).sortable('cancel');
    });

  };