MTAppjQuery で記事編集画面のドラッグアンドドロップの並び替えを無効化する

MTAppjQuery を使って Movable Type の管理画面をカスタマイズする案件では、「記事編集画面のドラッグアンドドロップでの並び替えを無効化しつつ、各フィールドの枠は残したい」というニーズが頻繁にあります。

そこで今回は、user.js と user.css で実装する方法をご紹介します。

user.js でドラッグアンドドロップの並び替えを無効化

user.js に下記のコードを書くとドラッグアンドドロップによるフィールドの並べ替えが無効になります。

if (mtappVars.screen_id === "edit-entry") {
 // ドラッグアンドドロップの並べ替えを無効化する
 $('#sortable').sortable({ disabled:true });
 // 無効化された記事編集画面だけ枠をCSSで調整するためのクラスを追加
 $('body').addClass('disabled-sortable');
}

これでドラッグアンドドロップは無効になりますが、ドラッグアンドドロップのハンドルが残っていたり、マウスカーソルが move になったりしてしまいます。なお、 sort-enabled クラスを削除すればそれらはなくなりますが、そうするとフィールドの外枠もなくなってしまいます。

user.css でハンドルなどを削除

今度は user.css に下記のコードを追加します。これで、ハンドルやマウスカーソルの問題が解消されます。

.disabled-sortable.edit-entry .sort-enabled .field-header {
 padding-left: 0;
 background-image: inherit;
}
.disabled-sortable.edit-entry .sort-enabled .field-header:hover {
 cursor: auto;
}
.disabled-sortable.edit-entry .sort-enabled .field-header label {
 margin-left: 10px;
}

これで完成です。