私がやろうとしているのは、ページにドラッグ アンド ドロップして配置可能なレイアウトを作成することです。Adobe 製品または Visual Studio のツール パネルを画面上で再配置する方法を知っていれば、これから説明する内容の手がかりが得られるかもしれません。
これは当初、jsbin のコード エディターのレイアウトを改善するために作成されましたが、オープン ソースになり、あらゆるプロジェクトで使用できるようになります。
私の実験では、div である 5 つの列があります。次のように配置されています。
+------+------+------+------+------+
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
+------+------+------+------+------+
それらのいずれかをドラッグして、別の div の下、さらには次のように 2 つの div の下に配置したい:
+------+------+------+
| | | |
| | | |
| | | |
| | |======+
|=============| |
| | |
+------+------+------+
また、快適なレイアウトに合わせて調整できるように、内側の端でサイズを変更できるようにしたいと考えています。
これに対して私が取ったいくつかのアプローチがあります。
http://jsfiddle.net/weaponxi/Y9cyU/ : 各列を 4 つの部分 (左半分、右半分、上半分、下半分) に分割するプレースホルダーを配置して、ドラッグ アンド ドロップすると、ドロップしたサイズの半分のサイズになるようにしました。要素 (下/上または左/右)。プレースホルダーが重なり合っていて、適切なコンテナーに簡単にドロップできるかどうかわからなかったため、問題が発生した可能性があるように見えました...これに取り組んでいるときに、試してみたい別のアイデアがありました。
http://jsfiddle.net/weaponxi/nUMxn/ : jQuery用のui layoutというプラグインがあったのを思い出しました。私はそれを試しましたが、目的に対して十分に効率的ではないことがわかりました。なじみのないコードを持つプラグインのドラッグ/ドロップ機能を作成する必要があるだけでなく、スペースを左中央と右パネルにしか分割できません...別のアプローチにすぐに移りました。
http://cssdeck.com/labs/3otgmqz5/0 : これは暗闇でのショットでした。これは、Gridster for jQuery と呼ばれる別のプラグインです。基本的に、ボックスを移動できるグリッドを提供します。サイズ変更オプションを追加して機能させることができると思いました（ただし、サイズ変更によるスペースの占有が完全ではないため、グリッドの空白があります）機能する可能性はありましたが、想定どおりに動作しませんでした（ 「サイズ変更」中にボックスをすばやく振るか、ドラッグを開始した場合にのみサイズが変更されるため、何か間違ったことをしたに違いありません）
これは私が試したことのない単なるアイデアです...セルを簡単に分割できるので（理論的には）、テーブルを操作する方が良いかもしれません。そして、それらは常に互いに隣接しています。唯一の問題はドラッグである可能性があります: ドロップすると、それが left/right または top/bottom であるかどうかをどのように知るのでしょうか? これらのプレースホルダーは、スニペット 1 に見られるように重なっています。
このようなことを試みるとき、どのようなアプローチを取るべきですか? これらのアイデアのいずれかが使用可能ですか? 私はすべての入力に感謝します。