grailsとjsPlumbで要素間をドラッグで接続できるようにする

grailsとjsPlumbで要素間をドラッグで接続できるようにするには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言

modules = {
    application {
        resource url:'js/application.js'
    }
    // jsPlumbのモジュールを宣言
    jsplumb {
      dependsOn 'jquery-ui'
      resource url: 'js/jquery.jsPlumb-1.3.7-all-min.js', disposition:'head'
    }
}

コマンドでgrails install-plugin jquery-uiを実行してjQuery UI pluginをインストールしておきます。 jquery.jsPlumb-1.3.7-all-min.jsはweb-app/jsに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。

  <g:layoutHead/>
  <!-- jsPlumbを使用 -->
  <r:require module="jsplumb"/>
        <r:layoutResources />
 </head>

3. viewに以下のようなコードを追加します。

<!-- jsPlumb -->
<div id="jsplumb" style="width: 300px; height:200px; background-color: #dddddd;">jsPlumb
 <div id="node0" style="width:50px; height:50px; background-color: #7799dd; position: absolute;">
 </div>
 <div id="node1" style="width:50px; height:50px; background-color: #ffff99;position: absolute;">
 </div>
</div>
<script type="text/javascript">
  $(function(){
    // レンダーモードを設定
    jsPlumb.setRenderMode(jsPlumb.CANVAS);
    // unload処理
    $("body").unload(function(){
      jsPlumb.unload();
    });

    jsPlumb.Defaults.Container = "jsplumb";

    // endpointの作成と配置
    $("#node0").css("left", $("#jsplumb").position().left + 10);
    $("#node0").css("top", $("#jsplumb").position().top + 40);
 var node0 = jsPlumb.addEndpoint("node0", 
      {anchor:"AutoDefault",
        isSource:true,
        isTarget:true
    });

    $("#node1").css("left", $("#jsplumb").position().left + 240);
    $("#node1").css("top", $("#jsplumb").position().top + 140);
 var node1 = jsPlumb.addEndpoint("node1", 
      {anchor:"AutoDefault",
        isSource:true,
        isTarget:true
      });

  });
</script>

出力画面

動作環境
grails 2.0.1

関連情報
jsPlumbのホームページ
http://jsplumb.org/jquery/demo.html