RailsのDroppables
dragdrop.js(scriptaculous)のDroppablesを触りました。ドラッグ＆ドロップのまとめになります。なんとなく、付箋アプリっぽくなってきました。
今日の成果物
| TODOリスト | 振り分け | |
|---|---|---|
| ドラッグ→ドロップ | 急ぎ あとまわし やらない |
Droppables.add
今日は、Droppablesを触ってみました。Draggable（前回）に比べて、若干わかりにくいルールがあります。そして、dragdrop.jsを読んでみると、ちょっとDroppablesはコードが読みにくい。ちゃんとしたAPIになっていないようです。
解読してみると、ドロップ可能なコンポーネントを作るインターフェースは、次のようになっています。
//ドラッグコンポーネント
<form class="postits" id="item_1">
<div>花見の場所取り</div>
<input type="hidden" name="content" value="花見の場所取り"/>
</form>
<script type="text/javascript">
new Draggable('item_1', {revert:false} );
</script>
//ドロップコンポーネント
<div id="急ぎ">急ぎ</div>
<script type="text/javascript">
Droppables.add('急ぎ', //ドロップコンポーネントのID。日本語使ってます。
{ accept: 'postits',
onDrop: function( dragElement, dropElement, event ){},
hoverclass: <droppable_hover_stylesheet_class>
});
</script>
acceptは、ドラッグできるコンポーネントのスタイルシートクラス（idではない。ここ注意！）。hoverclassは、ドロップコンポーネントがhoverしたときのスタイルシートクラス。
onDropは、ドラッグ＆ドロップに関係する２つのelementが捕獲できます。なので、次のように書いておけば、赤字のメッセージを表示できます。
onDrop: function( dragElement, dropElement, event ){
$('message').innerHTML
= dragElement.content.value + "は、" + dropElement.id;
}
今日の感想
Droppablesは、コードが読みづらくて、一瞬あきらめかけたｗ。特に、acceptの仕様には、参りました・・・。
でも、これでようやく、ドラッグ＆ドロップのルールが分かったので、あとは、onDropの中でAjax.Updaterを駆使すれば、なんとか望みのものが作れそうです。
あ、でもまてよ。「付箋を外す」ことを、どうやって認識したらいいんだろう・・・。ご存知のかた、ご教示を！
こんなの見つけちゃいました・・
付箋を使ったコミュニティツール、「Rinca.cc」。
パッと見、グループウェアの付箋版のようですが、いかほどのものか、触ってないのでわかりません。使ってみて、良さそうだったら車輪の再開発は止めよー。
みんな同じようなこと考えてるんですねぇ。
