sortablejsを使ったため覚書です。
sortablejsの評判
SortableJSはjQueryに依存していません。純粋なJavaScriptのライブラリとして作成されています。
[Day1]
— だあちょん＠プログラミング勉強中 (@dacheng42) May 6, 2023
htmlもcssもjavascriptも全くわからないけど、まずはSortableJSを触ってみた。CSSは謎みが深い。
【次回以降のTo Do】
・javascriptのDOM操作
・cssの基本的な記法
VScodeならエメットとかいうのがデフォルトで使えるのね。便利すぎ。#駆け出しエンジニアと繋がりたい #プログラミング初心者 pic.twitter.com/DkWmKut5tq
SortableJS、安定して使いやすくて頼もしい
— しゃなはす (@seanchas_t) November 17, 2022
SortableJS自体はライブラリ読み込んでテーブルにid当てるだけなので簡単ですよ
— 情報サイトでオーソリティを目指そう！ (@johositede) October 12, 2022
react-sortablejs割とあっさり成功した。react dndに比べるとすごく楽だった。
— 草野 洋平 / 伊勢屋 (@kedako) February 16, 2022
SortableJS/Vue.Draggableを入れるとtableの外にtbodyが表示されるのはなぜだろう。
— Hideki (@_hideki_a) February 5, 2022
評判はよさそうだったのですが、実際に使ったらデメリットがありました。
sortablejsのデメリット
ネストに対応していていません。
jquery uiのsortableでネストさせようとしたけどすんでのところで無理で、調べたらネストに対応したsortableを公開してくれてるのも見つけたけど、ちょっと満足できず。仕方ない、作るかと始めたら割とすんなり出来て、調べてた時間の方が長かった。プログラマーあるある。
— ひろなる (@heipoh) July 24, 2018
ネストを使おうとすると、複雑なコードをかかないといけず…、
imgの間にdivを挟めません。個人的には間のdivタグを全部間引いて、CSSのみで強引に実装しました。
sortablejsの代替案
Dragulaもちょっと使ってみました。
ネストに対応していましたが、スワップに対応していないためコードを書かなければいけないデメリットがあります。個人的に最終的にsortablejsを使いました。
react-beautiful-dndはネストとスワップに対応しているようです。今回はreactではないため使えませんでした。別のプロジェクトでNext.jsを使っているため覚えておきたいと思います。
sortablejsのインストール・使い方!
今回は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
});
コメント