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

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

[交換型並び替えJS](https://qiita.com/NickelCreate/items/8dd804279ea1eab75abe)
以前書いた内容のものですが、自作して色んなところで使っているうちに汎用化してしまったので、公開してみます。

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

[SortBox.js v0.1.0 (GitHubGist)](https://gist.github.com/RyosukeMori/671a1c155c43db76941dfef23d6f3d71)

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

#使い方

##必要なもの
・Jquery
・JqueryUI

##最小構成

```js

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

$(function(){
  SortBox.init();
});
```
とりあえずこれで動きます。
必須なものは、
・data-id　個別の識別をするために必要

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

```js

<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()

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

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

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

##その他

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

```js
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;
}
```

#サポート

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