以前書いた交換型のドラッグ並び替えを汎用化して拡張

交換型並び替えJS
以前書いた内容のものですが、自作して色んなところで使っているうちに汎用化してしまったので、公開してみます。

デバッグは全部できてるわけではないのでバージョンは0.1で……（おねがいします）
でもアップロード付きだよ！

もし使う人がいた場合は、基本動作は前回の記事を見て下さい。

使い方

必要なもの

・Jquery
・JqueryUI

最小構成


<ul id="sort-box">
  <li data-id="1">ひとつめ</li>
  <li data-id="2">ふたつめ</li>
</ul>

$(function(){
  SortBox.init();
});

とりあえずこれで動きます。
必須なものは、
・data-id　個別の識別をするために必要

あとはオプション設定で色々変えれます。
アップロード機能を使った最小構成は、


<ul id="sort-box">
  <li data-id="1">ひとつめ</li>
  <li data-id="2">ふたつめ</li>
  <li data-sort-box="file-wrapper">アップロードボタン</li>
</ul>

$(function(){
  SortBox.init();
});

data-sort-box="file-wrapper"　がついてるタグクリックでアップロードできます。
外部に設置する場合は別途オプション指定

1画面での複数配置は SortBox.init()　を都度増やしていく感じ。

オプション

オプション名	用途	型	デフォルト
sort	ソート機能の使用有無(falseなら使う意味……)	bool	true
childrenTag	並び替え対象要素タグ名	string	li
flex	横並び用style自動付与の有無	bool	true
sortDuration	要素移動時のアニメスピード	int	fast
upload	アップロード機能の使用有無	bool	true
uploadAction	アップロード先URL	string	./upload
uploadData	アップロード時の追加データ	Object	{}
fileType	アップロードファイルタイプ(今はimageだけ対応)	string	image
allowFileSize	アップロード許容サイズ(Byte)	int	1000000(1MB)
success	アップロード完了後処理	Closure	uploadSuccess()
successAfter	デフォアップロード完了後処理の後に追加する処理	Closure	なし
fail	アップロード失敗時処理	Closure	uploadFail()
sortSaveType	ソート情報をhtml保存する形式※1	string	hidden
sortSaveName	ソート情報保存時のname属性	string	sort_box_data
boxSelector	sort.boxのコンテナセレクタ	string	#sort-box
fileInputName	Input:fileのname属性	string	sort_box_file
fileInputWrapper	Input:fileのクリック代用要素セレクタ	string	#sort-box [data-sort-box=file-wrapper]

JqueryUIのDraggable Droppable用に使えるオプション
・revertDuration
・scroll
・opacity
・zindex

※1. タイプは以下だけ対応
　出力形式はすべて文字列で　value="3,1,2,..."
　左からソート順1,2,3,... 値がID　という形を想定してます。
　アップロード機能で上げた要素のIDは "new"
　すべてに class="sort-box-output"　が付きます。

hidden
- コンテナ内に input:hiddenでソート情報を出力
childTagText
- リスト対象子要素と同じタグで囲んで出力
childTagAttribute
- リスト対象子要素と同じタグに属性をつけて出力　属性は sort-box-data
- 例：　sort-box-data="3,1,2,5,4"

オプション指定付き init()

SortBox.init([コンテナセレクタ],[オプションオブジェクト]);

//1つはアップロードいらない！コンテナ指定したい！２つ使いたい！という場合。
SortBox.init('#myBox01',{
  upload: true,
  uploadData: {
    'token': $('token').val(),
  },
  successAfter: function(){
    alert('アップロード完了');
  },
});

SortBox.init('#myBox02',{
  upload: false,
  sortSaveType: 'childTagText',
});

その他

ある程度のタグなら子を指定しなくても使えるようにしています。
以下ソースそのまま

switch( boxTag ){
    case 'UL':
        this.options.childrenTag = 'li';
        break;
    case 'DIV':
        this.options.childrenTag = 'div';
        break;
    case 'OL':
        this.options.childrenTag = 'li';
        break;
    case 'DL':
        this.options.childrenTag = 'dd';
        break;
    case 'TR':
        this.options.childrenTag = 'td';
        break;
    case 'FORM':
        this.options.childrenTag = 'input';
        break;
    case 'MENU':
        this.options.childrenTag = 'button';
        break;
}

サポート

あり……ません(?)がもし使ってて機能追加欲しい場合はおっしゃってください。

Jquery UI を利用した 対象との交換型並び替え 汎用機能拡張版