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

More than 1 year has passed since last update.


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

交換型並び替えJS

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

デバッグは全部できてるわけではないのでバージョンは0.1で……(おねがいします)

でもアップロード付きだよ!

SortBox.js v0.1.0 (GitHubGist)

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


使い方


必要なもの

・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つはアップロードいらない!コンテナ指定したい!2つ使いたい!という場合。
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;
}


サポート

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