JavaScriptでドラッグ&ドロップを実現するためのライブラリ,
昨今,
ドラッグ&ドロップという操作は,
0001:// script.aculo.us dragdrop.js v1.8.1, Thu Jan 03 22:07:12 -0500 2008
0002:
0003:// Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
0004:// (c) 2005-2007 Sammi Williams (http://www.oriontransfer.co.nz, sammi@oriontransfer.co.nz)
0005://
0006:// script.aculo.us is freely distributable under the terms of an MIT-style license.
0007:// For details, see the script.aculo.us web site: http://script.aculo.us/
0008:
1~8行目は著作権表示です。
0009:if(Object.isUndefined(Effect))
0010: throw("dragdrop.js requires including script.aculo.us' effects.js library");
0011:
9~11行目で,
Droppables
ドラッグ&ドロップの,
このクラスにおいてoptionsは,
ここでまとめて,
- last_
active - 現在,
ドラッグが上空にあるドロップ先です。マウスイベントで常に更新されます。 - options.
greedy - デフォルトはtrueです。まだ実装されていませんが,
公式wikiの説明では, ドロップ先としてより貪欲に振る舞い, ドラッグが上空にきただけで強制的にドロップさせるオプションのようです。 - options.
hoverclass - デフォルトはnullです。クラス名が入ります。ドロップを受けつけるドラッグが上空にきたときに,
ドロップ先の要素に指定したクラス名を追加するオプションです。例えば, このクラス名に要素を明るくするようなCSSを定義しておくことで, ユーザに, ドロップできることを視覚で伝えることができます。 - options.
tree - デフォルトはfalseです。後編で解説するSortableでドロップ先がツリーとして振る舞うときに,
このオプションが重要になります。 - options.
containment - DOM idか,
DOM idの配列を指定します。ここで指定した要素の子要素のドロップだけを受けつけます。 - options._containers
- 内部的に使います。上述のcontainmentで指定したDOM idに$関数を適用した結果を,
ここにキャッシュしておきます。 - options.
accept - DOM idか,
DOM idの配列を指定します。ここで指定した要素のドロップだけを受けつけます。 - options.
element - 内部的に使います。ドロップ先の要素です。
- options.
onHover - ドロップを受けつけるドラッグが上空にきたときに呼ぶフックです。このフックは引数に,
ドロップ先の要素, ドラッグ中の要素, それらの位置の重なり具合, をとります。 - options.
onDrop - ドロップがあったときに呼ぶフックです。このフックは引数に,
ドロップ先の要素, ドロップした要素, マウスイベントのイベントオブジェクト, をとります。
それではコードを見ていきましょう。
0012:var Droppables = {
0013: drops: [],
0014:
12~14行目のdropsは,
0015: remove: function(element) {
0016: this.drops = this.drops.reject(function(d) { return d.element==$(element) });
0017: },
0018:
15~18行目のremoveは,
0019: add: function(element) {
0020: element = $(element);
0021: var options = Object.extend({
0022: greedy: true,
0023: hoverclass: null,
0024: tree: false
0025: }, arguments[1] || { });
0026:
0027: // cache containers
0028: if(options.containment) {
0029: options._containers = [];
0030: var containment = options.containment;
0031: if(Object.isArray(containment)) {
0032: containment.each( function(c) { options._containers.push($(c)) });
0033: } else {
0034: options._containers.push($(containment));
0035: }
0036: }
0037:
0038: if(options.accept) options.accept = [options.accept].flatten();
0039:
0040: Element.makePositioned(element); // fix IE
0041: options.element = element;
0042:
0043: this.drops.push(options);
0044: },
0045:
19~45行目のaddは,
31行目で,
33行目で,
38行目で,
40行目で,
43行目で,