Sort Manual

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

CSSに関しては一部CSSライブラリを採用しているので併用してください。

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

  • DEMO

  • 1

  • 2

  • 3

  • 4

  • 5

使い方

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

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


  
.sortableMod-li {
    margin: 0 0 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--line-main);
    display: flex;
    justify-content: space-between;
  }
  .sortableMod-handle {cursor: move;}
  .sortableMod-handle.ico-mui::before {content: '\e25d';}
$('.sortableMod').each(function(){
    $('li',this).addClass('sortableMod-li').append('');
  });
  
  if($('.sortableMod')[0]){
    $('.sortableMod').sortable({
      tolerance: 'intersect', //入れ替わる重なり具合
      containment: '.sortableMod', //ドラッグ可能範囲
      axis: 'y', //移動方向
      items: '.sortableMod-li', //並び替え機能対象
      handle: '.sortableMod-handle', //ドラッグ開始ハンドル
      opacity: '0.8', //ドラッグ要素の透過
      revert: '300', //アニメーション
      stop: function(event, ui){
        //移動後の処理
      }
    });
  }