Sortablejsを使用してドラッグアンドドロップリストコンポーネントを実装する

2年 ago
結衣, 春花
1 minute

ドラッグアンドドロップ可能な要素のリストを実現する JavaScriptライブラリです。Sortable.jsを使用してドラッグアンドドロップ可能なリストコンポーネントを作成するには、次の手順に従います。

  1. Sortable.jsライブラリをインポートします。これはCDNを通じてインポートすることも、ライブラリファイルをローカルにダウンロードしてプロジェクトにインポートすることもできます。サンプルコードを以下に示します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>
  1. ドラッグする要素を入れる HTML のリストを作る。例：
<ul id="sortable-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
  1. Sortable.create()
var sortableList = document.getElementById('sortable-list');
Sortable.create(sortableList);

この時点で、基本的なドラッグアンドドロップリストのコンポーネントが完成しています。Webページ上でリスト項目をドラッグして、順序を変更できるようになりました。

に加えて、Sortable.jsは多くの設定オプション、利用可能なイベントを提供しており、それらによってドラッグ可能なリストコンポーネントの動作をカスタマイズできます。Sortable.jsのドキュメントをご覧になり、ライブラリの使用に関する詳細をご覧ください。

bannerAds