sortablejsの使い方

sortablejsを使ったため覚書です。

目次

sortablejsの評判

SortableJSはjQueryに依存していません。純粋なJavaScriptのライブラリとして作成されています。

評判はよさそうだったのですが、実際に使ったらデメリットがありました。

sortablejsのデメリット

ネストに対応していていません。

ネストを使おうとすると、複雑なコードをかかないといけず…、

imgの間にdivを挟めません。個人的には間のdivタグを全部間引いて、CSSのみで強引に実装しました。

sortablejsの代替案

Dragulaもちょっと使ってみました。

ネストに対応していましたが、スワップに対応していないためコードを書かなければいけないデメリットがあります。個人的に最終的にsortablejsを使いました。

react-beautiful-dndはネストとスワップに対応しているようです。今回はreactではないため使えませんでした。別のプロジェクトでNext.jsを使っているため覚えておきたいと思います。

sortablejsのインストール・使い方!

GitHub
GitHub - SortableJS/Sortable: Reorderable drag-and-drop lists for modern browsers and touch devices.... Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required. - SortableJS/Sortable

今回はCDN経由で埋め込みました。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>

JSの適切な場所に以下のコードをいれればいいだけです。

new Sortable(preview, {
  animation: 150,
  swapThreshold: 0.65
});
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次