JavaScript
Sass
jQuery
TypeScript
pug

TypeScript&jQuery-uiで要素の並び替えを行う

More than 1 year has passed since last update.

はじめに

普段から「TypeScript + Pug + Sass」でアプリケーションを実装しているんですが、あるお客さんから「なんか今風の並び替え画面作ってくれん?」的な要望が1枚のデザイン画像と共に降ってきたので、実装してみた

サンプルのソースコードはこちら

やりたいこと

  • 左右2ペインに分けて並び替え
  • 左右のペイン間での要素の移動,並び替え

そういうときのjQuery-uiさん

要素を並び替えとかするのって「jQuery-ui」が便利だったはず…
よし、パッケージをインストールするやで

npm install jquery-ui

型定義ファイルも持ってくるか。

npm install @types/jqueryui

これであとはtsファイルにimportしたら勝ちやろ

import * as $ from "jquery";
require("jquery-ui");

結果 → 「なんでエラー吐くんや…」
node_module内のjquery-uiを見てみると、distというディレクトリがない。そら読み込めへんわな
ということで必要な奴を直接読み込もうか
あと、ちょいと工夫をして…

import * as $$ from "jquery";
if (typeof (<any>window).$ === "undefined") {
  (<any>window).$ = $$;
}
if (typeof (<any>window).jQuery === "undefined") {
  (<any>window).jQuery = $$;
}

import * as IScroll from "iscroll";
if (typeof (<any>window).IScroll === "undefined") {
  (<any>window).IScroll = IScroll;
}

declare const require: Function;
require("jquery-ui/ui/widgets/sortable.js");
require("jquery-ui/ui/widgets/draggable.js");
require("jquery-ui/ui/widgets/droppable.js");
require("jquery-ui-touch-punch");

前半のごちゃごちゃしている部分は、「iscroll」をimportするための闇魔術
私の先輩が生み出してくれました

並び替え時の処理はelement.sortable()、ドロップ時の処理はelement.droppable()を利用します

sortableElement.sortable({
  update: function() {
    // 並び替え実行時の処理
  },
  // 左右のペインに共通のClassをつけて下記のようなオプションを設定します
  // これで左右のペイン間で要素を移動させることができる
  connectWith: ".connectedSortable"
})

droppableElement.droppable({
  drop: function(event, ui) {
    // 要素をドロップした時の処理
    // eventに要素がドロップされる要素,uiにドロップした要素の情報が拾えます
  }
})

私は対象の要素を並び替えた時に新しい並び順をDBに保存する処理を実装しています

さいごに

文字だけではまっっっっったく想像がつかないと思うので、githubのソースコードで実際に確認してみてください
node.jsのフレームワーク「express」を利用しています(nodejsが一番馴染みがあるので)
webpackでTypeScriptやScssをコンパイルしてます
何か問題があればコメントなり、issueなり上げていただければありがたいです

ではまた!