jQuery layout のレイアウトを超えてドラッグ & ドロップ

Javascript

jQuery layout を使っていて、West なパネルから South なパネルへドラッグ & ドロップしたい。
jQuery UI の Draggable と Droppable を実装すりゃ簡単と思ったら、パネルを超えられなかったが以下のようにすると行ける。

$('.jqtree-title').draggable({
  cursor: 'move',
  helper: function () {
    return $(this).clone().appendTo('body').css('zIndex',5).show();
  }
});
$('.ui-layout-pane-south').droppable({
 accept: '.jqtree-title',
 drop: function (e, ui) {
   self.createNew(ui.draggable.text());
 } 
});

z-index を定義してやると OK だった。

参考文献

UI Layout - Tips & FAQ