MT：ついでにエディタのツールバーもドラッグ可能にしてみる

Movable Typeの記事編集画面のツールバーをドラッグできるようにしてみました。

以下の内容は、Movable Type 4系に関するものです

Movable Type 4では記事の内容のエリアの縦サイズは可変になるようになっています。ところが、ワタくシのように記事の「続き（extend）」を使わずに、ほとんどが「本文」のみで書いており、長い記事の編集中にテキスト部分をスクロールバーが出ないように長くしていると、ツールバー（テキスト編集のためのボタン群）が上のほうに送られることで画面から隠れてしまうケースがあります。

これを解決する方法で思いつくのはこのようなところです。

可変バーのところを使ってテキスト部分を短くする
連続改行を入力していくことで下のほうにあるテキストを中央に持っていく
「かたつむりくんのWWW」さまにて全画面表示のプラグインが提供されているので利用してみる（Movable Type の記事投稿のエディタ部分を全画面表示（フルスクリーン）にするプラグイン）

そこで、MTのツールバーもドラッグで任意の位置にもっていくことができるようにしてみたというわけです（というのはタテマエでdraggableのオプションを試すのが目的だと言う話もあります）。

方法ですが、先般書いた、「メモ：MTでファイルアップロード等のダイアログが画面内に収まり切らない時の対処」の記事内のダイアログをドラッグする方法にコードを追加します。追加する（している）コードは以下のようになります。

jQuery(function(){
     //  エディタツールバーにz-index設定し、テキスト部分に潜り込まないようにする
       $('#editor-content-toolbar').css("z-index","1");
     //  draggable の設定をする
       $('#editor-content-toolbar').draggable({
        snap: ".tab",
        cursor: "move",
        containment: "#content-inner",
        drag: function(event, ui){$(".field-buttons-formatting").css("visibility","hidden");},
        stop: function(event, ui){$(".field-buttons-formatting").css("visibility","visible");}
        });
});

導入までの手順の簡単なオサライです。

https://www.movabletype.jp/faq/modal-dialog.htmlの代替テンプレートをダウンロード
/alt-tmpl/ディレクトリ以下に指定された箇所にアップ。ダイアログの動作を確認。
jQuery本体、jQuery UI（ui.core.js、ui.draggable.js）を用意する
代替テンプレートを書き換えて再びアップする

動作確認はMTOS4.3-jaとおよびこのブログでのMovable Type Pro 4.261、ブラウザはFirefox3.0.13とIE7です。動作的にはFirefoxのほうを推奨します。

あと、特定の要素を指定していますから、テンプレートの構造とか要素が変更になると動作しなくなります。なお、draggableのオプション設定については以下を参考にしました。

Draggable [ jQuery ] - StackTrace（stacktrace.jp）
UI/API/1.7.2/Draggable - jQuery JavaScript Library（jquery.com）

MT：ついでにエディタのツールバーもドラッグ可能にしてみる

Comments: