エイチデザイン / ソート: 手動

ソート: 手動

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

CODE
DEMO

説明
使い方
解説

jQueryのライブラリを使用

jquery-uiライブラリを読み込む。
[ul.sortableMod]を用意。

準備中

ライブラリを導入する前に

html
```
  
```

css

.sortableMod-li {
  margin: 0 0 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid #999;
  display: flex;
  justify-content: space-between;
}
.sortableMod-handle {cursor: move;}
.sortableMod-handle.ico-mui::before {content: '\e25d';}

jQuery

$('.sortableMod').each(function(){
  $('li',this).addClass('sortableMod-li').append('');
});

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

TOP

html

css

jQuery