JqTree のノードに追加で属性を追加する方法

Javascript 
▼Foo
├─ Bar
└─ Baz

JavaScript のツリービューなライブラリの JqTree を使って上のようなツリーを描画すると、以下の様な HTML が生成される。

<li class="jqtree_common jqtree-folder">
  <div>
     <a class="jqtree_common jqtree-toggler">▼</a>
     <span class="jqtree_common jqtree-title ui-draggable">Foo</span>
  </div>
  <ul class="jqtree_common ">
    <li class="jqtree_common">
      <div>
        <span class="jqtree-title jqtree_common ui-draggable">Bar</span>
      </div>
    </li>
    <li class="jqtree_common">
      <div>
        <span class="jqtree-title jqtree_common ui-draggable">Baz</span>
      </div>
    </li>
  </ul>
</li>

このノードを JqTree のドラッグ & ドロップ機能を使わず、jQuery UI のドラッグ & ドロップを利用して、ツリー以外の所にドロップした際に何のノードがドロップしたか知りたい。


ドロップした際には タグの情報が取得できるので、そこに id なり data- 属性があれば、そこから Foo の情報を格納している Collection に問い合わせて他の情報を取得とかができる。
Foo という名前がユニークである保証がないので、ユニークな ID を入れたい*1。
# ユニークな ID から Collection 内を get() で逆引きしたい


以下のようにツリーを構築する際にコールバックを定義すればいける。

var nodes = [{
  label: 'Foo',
  children: [
    {label: 'Bar', id: 'bar'},
    {label: 'Baz', id: 'baz'},
  ]
}];

var tree = $('#tree');
tree.tree({
  data: nodes,
  autoOpen: true,
  onCreateLi: function (node, li) {
    if (typeof(node.id) !== 'undefined') {
      var targetNode = $(li).children('div').children('span')[0];
      targetNode['id'] = 'node-id-' + node.id;
      $(targetNode).attr('data-node-type', node.type);
    }
  }
});

onCreateLi でノードを生成した際にコールバックで呼ばれるので、その中で タグの中に埋め込んでやる。
node.id には data: nodes の中で id を定義したものが来るので、それを span タグ内の id に突っ込めば出来た。

*1:簡単に言えば Backbone.js の cid