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

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

disabled-sortable-min.png

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;
}

これで完成です。

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。

クライアントの満足度を高めるためにぜひお使いください。

MTAppjQuery の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

CMSとして国内5万サイト以上に導入されている Movable Type に関する記事です。

Craft CMS

CMS 業界で注目の Craft CMS に関する記事です。Craft CMS はチーム全体をハッピーにしてくれる素晴らしい CMS です。