SortableJS

3ステップで試す

1. 1

   SortableJS 1.15.7を一時ディレクトリへ導入する

   安定版を固定し、既存アプリから分離してdrag-and-dropを確認します。

   demo=$(mktemp -d "${TMPDIR:-/tmp}/sortablejs.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact sortablejs@1.15.7コピー
2. 2

   並べ替え可能なlistを持つ最小HTMLを作る

   READMEの基本例にanimation設定だけを加え、3件のlist itemをdragできる状態にします。

   printf "%s\n" '<!doctype html>' '<meta charset="utf-8">' '<ul id="items"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>' '<script src="./node_modules/sortablejs/Sortable.min.js"></script>' '<script>Sortable.create(document.getElementById("items"), { animation: 150 });</script>' > index.htmlコピー
3. 3

   browserでHTMLを開いて順序を入れ替える

   index.htmlをbrowserで開き、Item 1〜3をdragして順序を変更できることを確認します。

   index.htmlコピー

Built with

• JavaScript

カテゴリとタグ

GitHubデータ

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

あわせて探訪

• Nano ID27,076 Stars

  共通タグ 3件 · 同じ言語

  暗号学的乱数からURL-safeな短いIDを生成し、文字集合と長さも用途に合わせて調整する

  JavaScript
• Select225,907 Stars

  共通タグ 3件 · 同じ言語

  native selectをsearch・multi-select・AJAX・tagging対応のrich selectorへ拡張する

  JavaScript
• SweetAlert218,098 Stars

  共通タグ 4件 · 共通カテゴリ 1件 · 同じ言語

  alert・confirm・promptをWAI-ARIA対応のpopupへ置き換え、Promiseで結果を受け取る

  JavaScript
• Tippy.js12,240 Stars

  共通タグ 4件 · 共通カテゴリ 1件 · 同じ言語

  tooltip・popover・dropdownをPopperベースで配置し、hover・focus・click操作へ追加する

  JavaScript
• Bootstrap174,991 Stars

  共通タグ 4件 · 共通カテゴリ 1件

  responsive grid・utility・componentをCSS/Sassとnative JavaScriptから組み立てるfrontend framework

  MDX
• Alpine.js31,960 Stars

  共通タグ 4件 · 共通カテゴリ 1件

  HTML属性にstate・event・表示制御を記述し、小さなinteractive UIを構築する

  HTML