Help us understand the problem. What is going on with this article?

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

サポート

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした