第2回: 正方形をドラッグ可能にする

前回は、イベントハンドラに引数としてイベントオブジェクトを渡す方法を学びました。また、ユーザーがダブルクリックした位置を取得したり、jQueryのappendメソッドを用いてDOM要素を追加したりする例も示しました。

今回は、画面に追加された正方形をドラッグして移動する機能をjQuery UIを使って実装しながら、CoffeeScriptにおけるハッシュリテラルの記述法を学びます。

jQuery UI の導入

jQuery UIライブラリを導入すると、簡単にDOM要素をドラッグ可能(draggable)に変えることができます。

app/assets/javascripts/application.js を修正。

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

jQuery UIのソースコードは、Railsアプリケーションにデフォルトで組み込まれているので、require するだけで利用可能になります。

カーソルの形状を変更

app/assets/stylesheets/top.css.scss を修正。

div#canvas {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: silver;
  
  div.block {
    position: absolute;
    width: 78px;
    height: 78px;
    border: 2px solid black;
    background-color: pink;
    cursor: pointer;
  }
}

CSSセレクタ div#block に cursor: pointer というスタイルを追加しています。

ドラッグ可能にする

app/assets/javascripts/top.js.coffee を修正。

修正前:

$ ->
  $("div#canvas").dblclick (e) ->
    canvas = $(e.target)
    x = e.pageX - canvas.position().left
    y = e.pageY - canvas.position().top
    canvas.append("<div class='block' style='left: #{x}px; top: #{y}px;' />")

修正後:

$ ->
  $("div#canvas").dblclick (e) ->
    canvas = $(e.target)
    x = e.pageX - canvas.position().left
    y = e.pageY - canvas.position().top
    block = $("<div class='block' style='left: #{x}px; top: #{y}px;' />").
      draggable(containment: "parent").css(position: "absolute")
    canvas.append(block)

キャンバスに追加するDOM要素をいったん変数 block に格納してから、append しています。

また append する前に、draggable メソッドを呼んでいます。単にこのメソッドを呼べば、対象のDOM要素はドラッグ可能になるのですが、ここではドラッグ可能な範囲を限定するために、 containment: "parent" というオプションを指定しています。この結果、正方形は親要素であるキャンバスから外に出ないようになります。

draggable(containment: "parent") という書き方に注目してください。draggable メソッドに指定している引数はハッシュなので、純粋なJavaScriptでは draggable({ containment: "parent" }) のように記述すべきところです。しかし、CoffeeScriptでは中括弧を省略できます。

次に css(position: "absolute") という部分に着目してください。

ドラッグ可能になったDOM要素には、自動的に position: relative というスタイルが設定されてしまうので、css メソッドによってposition: absolute というスタイルを再設定しています。

動作を確認しましょう。ブラウザを再読込して、ページ上の灰色の部分をダブルクリックすると正方形が現れます。正方形の上にマウスカーソルを合わせると、カーソルの形状が変化し、マウスでドラッグすると正方形が移動します。