Sort Manual

リストアイテムを手動で並び替える機能

詳しい導入事例は導入方法を参照してください。

jQueryライブラリを使用したドラッグでの並び替え。

  • DEMO

  • 1

  • 2

  • 3

  • 4

  • 5

使い方

Sort Manualの記述の前にjquery-uiライブラリを読み込んでください。
+-.mod_sortManual-+の中に並び替える要素を格納する。

スマホは非対応。鋭意作成中。
  • HTML
  • CSS
  • Script
    
    
  • 
  


  
.mod_sortManual-li {
  margin: 0 0 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line-main);
  display: flex;
  justify-content: space-between;
}
.mod_sortManual-handle {cursor: move;}
.mod_sortManual-handle.ico-mui::before {content: '\e25d';}

$('.mod_sortManual').each(function(){
  $('li',this).addClass('mod_sortManual-li').append('<i class="mod_sortManual-handle ico-mui"></i>');
});

if($('.mod_sortManual')[0]){
  $('.mod_sortManual').sortable({
    tolerance: 'intersect', //入れ替わる重なり具合
    containment: '.mod_sortManual', //ドラッグ可能範囲
    axis: 'y', //移動方向
    items: '.mod_sortManual-li', //並び替え機能対象
    handle: '.mod_sortManual-handle', //ドラッグ開始ハンドル
    opacity: '0.8', //ドラッグ要素の透過
    revert: '300', //アニメーション
    stop: function(event, ui){
      //移動後の処理
    }
  });
}