項目をドロップする
続いて、ドロップする項目を作成してみましょう。ドロップ項目は、単に項目を作成するだけでなく、ドロップ時の処理も併せて用意できなければいけません。これも簡単なサンプルを挙げて説明しましょう。
<div id="drag1" class="drag_div">Drag項目その1</div>
<div id="drag2" class="drag_div2">Drag項目その2</div>
<br /><br />
<div id="drop1" class="drop_div">Dropできます</div>
<script type="text/javascript">
<!--
new Draggable('drag1',{ revert: true });
new Draggable('drag2',{ revert: true });
Droppables.add('drop1',{
accept: 'drag_div',
onDrop: function(element) {
document.getElementById('drop1').innerHTML = element.innerHTML;
}
});
//-->
</script>
div.drag_div2 {
position: absolute;
left: 200px;
top: 50px;
width : 120px;
height : 60px;
background-color : #ccffcc;
}
div.drop_div {
position: absolute;
left: 20px;
top: 150px;
width : 200px;
height : 100px;
background-color : #ffcccc;
}
ここでは2つのドラッグ項目と1つのドロップ項目を用意しました。drag1をdrop1にドロップすると、drop1の表示テキストが変わります。が、drag2をドロップしても、何も変化しません。ここでは、drag1だけをドロップ項目として受け入れるようにしているのです。
まずは、ドラッグ項目のほうを見てみましょう。ここでは、{ revert: true }というオプションが指定されていますね。この「revert」というのは、ドラッグ終了後、自動的にもとの位置に戻る機能です。これをtrueにすることで、その項目を置きっぱなしにせず片付けることができるというわけです。ドロップ項目の作成は、次のようにして行っています。
Droppables.add('IDの指定',{オプション指定});
ドラッグは、そのためのオブジェクトをnewで作成するだけでしたが、ドロップは違います。ドロップを管理するDroppablesに、「add」でドロップ項目を登録するのです。これで、指定したIDの項目がドロップ可能なものとして認識します。
オプションには、「accept」と「onDrop」を用意してありますね。acceptは、ドロップを受け付けるクラスを指定します（IDではないので注意！）。これを指定すると、その項目のclassにacceptしたクラス名を指定してあるものだけがドロップできるようになります。こうすることで、ドロップ可能な項目を制限できます。
onDropは、先にドラッグ項目でも登場したコールバックの一つで、項目をドロップした際に発生するイベントで実行する関数を設定します。これは、
function(element){ ……実行する処理…… }
このような形で定義されます。第1引数には、ドロップした項目を示すオブジェクトが渡されます。これを利用して、ここではドロップした項目のinnerHTMLの値をドロップ項目に表示させています。Droppablesのコールバックには、この他、ドラッグ項目がドロップ項目上にあるときに連続して発生する「onHover」というものも用意されています。
スライダーによる数値入力
このドラッグ&ドロップの機能を利用して作られているGUIが「スライダー」です。これは、マウスでノブの部分をドラッグして数量を指定するものです。一般的なアプリケーションではよく見られますが、Webでは標準的に用意されていないので、あまり見ることがないインターフェイスです。
<div id="slider_back" class="slider_back">
<div id="slider_top" class="slider_top">0</div>
</div>
<script type="text/javascript">
<!--
new Control.Slider('slider_top','slider_back',{
axis: 'Horizontal',
range: $R(0, 10),
values: $R(0, 10),
onChange: function(value){
document.getElementById('slider_top').innerHTML = value;
},
onSlide: function(value){
document.getElementById('slider_top').innerHTML = value;
}
});
//-->
</script>
div.slider_top {
position : relative;
top : -10px;
width : 20px;
height : 25px;
background-color : #aaaaff;
text-align: center;
vertical-align: baseline;
}
div.slider_back {
width : 200px;
height : 5px;
background-color : #6666aa;
}
ページを表示すると、横に細長い線の上に四角いノブが表示されます。このノブをマウスで左右にドラッグすると、0～10の整数がリアルタイムに表示されていきます。
このスライダーは、2つのタグを組み合わせて利用します。これは、次のように、スライダーのバーとなるタグの中にノブのタグを組み込んだ形で記述します。
<div id="スライダーのバー">
<div id="スライダーのノブ"></div>
</div>
これらのタグの位置や大きさは、スタイルシートで別途指定しておきます。そして、その後にあるJavaScript部分で、これらのタグにスライダーの機能を設定します。スライダーは、Control.Sliderというオブジェクトを作成して使います。
new Control.Slider('ノブのID','バーのID',{オプションの指定});
このようにして、あらかじめ用意しておいた<div>タグのIDを第1、第2引数に指定します。第3引数には、スライダーに関するオプションを設定します。スライダーでは、最低限用意しておくべきオプションがいくつかあります。主なものだけでも理解しておきましょう。
| オプション | 説明 |
| axis | スライダーの配置方向を指定するものです。垂直または水平を示す'Vertical','Horizontal'のいずれかを指定します。 |
| minimum,maximum | 数値の範囲を指定するものです。ここで最大値と最小値を指定すると、その範囲内で数値が選択できるようになります。 |
| range | 数値の範囲を指定します。これはprototype.jsにある「$R(開始値,終了値)」というものを利用して設定します。minimum,maximumは指定した範囲の数値が自由に選択される（少数も含めて選べる）のに対し、rangeで指定するとその間の整数値だけをするようにできる、という点でしょう。 |
| values | rangeを指定したときの、それぞれの位置の値を指定するものです。これも$Rで指定するとよいでしょう。 |
| onChange | バーの部分をクリックして値を変更したときのイベントです。値には関数定義を指定します。この関数では、選択された値が引数として渡されます。 |
| onSlide | バーをドラッグして動かしたときに連続して発生するイベントです。値には関数定義を指定します。やはり、現在の値が関数の引数に渡されます。 |
やや分かりにくいのが、minimum,maximumとrange,valuesのどちらを使うかという点でしょう。数値を表示する必要がなく、決まった範囲内をアナログ的に指定したい場合には、minimum,maximumを使った方が良いでしょう。決まった整数値の範囲内から選ぶような場合には、range,valuesを使うのが良いでしょう。
