table-dragger

JavaScript

ドラッグ&ドロップでテーブルを並べ替えられる「table-dragger」

table-draggerはドラッグ&ドロップでテーブルの並べ替えを可能にしてくれるJSライブラリです。アニメーションつきでテーブルが入れ替わるので、直感的な操作を体感することができるテーブル実装が可能です。

table-dragger

デモ

デモではいくつかの種類のテーブルが用意されており、各テーブル内でドラッグ&ドロップによる並べ替えを行うことができます。

ドラッグ&ドロップで並べ替えするときにアニメーションつきで入れ替わるので、どこと入れ替わったのかを把握しやすいところがいいですね。

デモのタイプには、Default、Sort Rows、Only Body、Handler、Free、Eventといったテーブルが用意されています。

各テーブルの下にはコードも記述されているので、具体的にどのように実装していくのかも同時にチェックできます。

また、table-draggerにはオプションもいくつか用意されており、mode、dragHandler、onlyBody、animationといった項目の設定が可能になっています。

というわけで、ドラッグ&ドロップによる並べ替えを可能にするテーブルを実装したい人は、ぜひtable-draggerを活用されてみてはいかがでしょうか?

table-dragger

Zoomingクールな画像ズーム機能を実装できる「Zooming」前のページ

数字を分割できるjQueryプラグイン「number-divider.js」次のページnumber-divider.js

関連記事

  1. no-image

    JavaScript

    Lightboxスタイルのギャラリーやカルーセルを実装できる「slideBox.js」

    slideBox.jsはレスポンシブに対応したLightboxスタイル…

  2. WD_ImageStax

    JavaScript

    山積みされた写真をシャッフルさせるフォトギャラリー「WD_ImageStax」

    WD_ImageStaxは無造作に山積みされた写真をシャッフルさせるフ…

  3. SweetDropdown

    JavaScript

    スタイリッシュで多彩なドロップダウンを実装できる「SweetDropdown」

    SweetDropdownは、多彩なドロップダウンを実装することができ…

  4. jquery.mark

    JavaScript

    キーワードをハイライトしてくれる「jquery.mark」

    jquery.markはキーワードをハイライトしてくれるjQueryプ…

  5. no-image

    JavaScript

    グリッドレイアウトによるシンプルで軽量なギャラリー「Grid Gallery」

    Grid Galleryはグリッドレイアウトによるシンプルで軽量なイメ…

  6. ssi-modal

    JavaScript

    フレキシブルでパワフルなモーダルウィンドウを実装できる「ssi-modal」

    ssi-modalはカスタマイズ性に優れたフレキシブルでパワフルなモー…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6
  5. iPad Air

アーカイブ

PAGE TOP