script.aculo.usのDraggableを使ってみる - 日替わり NAT’s Champloo

昨日(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を使わずに作れそう。