jQuery UI 可排序的 cancel() 方法

简介

cancel() 方法是 jQuery UI 可排序组件提供的一个 API，它用来取消当前排序操作。使用此方法可以回滚到上一个状态，还原排序前的顺序，而不会改变列表的顺序。

使用方法

cancel() 方法可以直接在可排序元素上调用，如下：

$( ".sortable" ).sortable( "cancel" );

参数

cancel() 方法没有参数。

示例

下面展示一个使用 cancel() 方法的例子。当可排序元素被拖动但鼠标松开时，cancel() 方法被调用，使得排序回滚到原始序列。

<div class="sortable">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<script>
  $( ".sortable" ).sortable({
    cancel: ".ui-state-disabled",
    stop: function( event, ui ) {
      ui.item.children( ".ui-state-disabled" ).prop( "disabled", false );
    }
  });

  $( ".sortable" ).on( "mouseup", function() {
    $( this ).sortable( "cancel" );
  });
</script>

结束语

cancel() 方法是 jQuery UI 可排序组件提供的一个便捷的撤回方法。学会了使用它，可以在排序时更加自如地掌控整个交互过程。