CMSによくあるドラック&ドロップシステムの仕組みについて

Question

最近WordPressのプラグイン「Elementor Page Builder」を使用していてふと思ったのですが、CMSにたまにある見たまま編集などの機能はどういうシステムで動いているのでしょうか？
外部にあるボックスをドラック＆ドロップするとそこにHTMLコードが挿入されるなど調べても出てこずもやもやしています。
またPHPでこういった機能は実現可能なのでしょうか？

Answer 1

利用していないのでわかりませんが、外観だけ見る限りjavascriptで定義された内容を
もとに、ユーザがそこに編集を加えてscript内でHTMLコードを構築して、最終的に保存
をPHPとMySQLで行ってるんだと思いますよ。

定義された内容（ドラックするアイコンに対応するHTMLコード）が、PHPのハードコー
ディング、MySQLに登録されている、javascriptのハードコーディングなのかは内容
見ないとわかりませんが。。。ｗ

s.t.さんが参考URL載せていらっしゃるので、そちらで確認してみるのもよいのでは
ないでしょうか。

Answer 2

実際に Elementor がこうなのかはわかりませんが、

1. javaScript で変更箇所のクローンを作成。
2. リアルタイムでの文字変更なども JavaScript で制御。

※この辺は Angular や React、Vue など、フレームワークが色々あります。
WordPressはたしか Backbone でしたかね。

1. 変更内容をサーバーにPOST、更新。

というのが大体の手順かなと思います。

Answer 3

違ってたらごめんなさい、普通にソースコードが公開されているようですよ。

【参考URL】
https://github.com/pojome/elementor

あと、PHPでも実装は可能です。
どのように実装するかは色々あるとは思います。