昨日(id:NAT:20060102#p1)に引き続き、script.aculo.usを使ってちょっとしたサンプルを作ってみる。Draggableを使って、ドラッグできる画像のサンプルを作ってみた。
ソースコードはこんな感じ。jsディレクトリに、prototype.jsやscript.aculo.usのjsファイルが置いてあるのが前提。
<html> <head> <title>Draggable Test</title> <script src="js/prototype.js"></script> <script src="js/scriptaculous.js"></script> <style type="text/css"> .draggable { cursor:move } #part0 { position:absolute; top:50; left: 50 } #part1 { position:absolute; top:50; left: 400 } #part2 { position:absolute; top:300; left: 50 } #part3 { position:absolute; top:300; left: 400 } </style> </head> <body> <div id="positionField">id: 0, 0</div> <span class="draggable" id="part0"><img src="part0.jpg" /></span> <span class="draggable" id="part1"><img src="part1.jpg" /></span> <span class="draggable" id="part2"><img src="part2.jpg" /></span> <span class="draggable" id="part3"><img src="part3.jpg" /></span> <script> function showPosition(draggable) { var pos = Position.cumulativeOffset(draggable.element); var positionField = $('positionField'); positionField.innerHTML = draggable.element.id + ': ' + pos[0] + ', ' + pos[1]; } var option = { snap: [5, 5], change:showPosition }; new Draggable('part0', option); new Draggable('part1', option); new Draggable('part2', option); new Draggable('part3', option); </script> </body> </html>
あっけなくドラッグ&ドロップが実現できちゃうのには、ちょっとびっくり。実質的には"new Draggable('element_id');"と書くだけで実現できるし。
これ使えば、ちょっとした絵合わせパズルみたいなのがFlashやJava Appletを使わずに作れそう。