Développement backoffice - éditeur wysiwyg

Bonjour,

Je suis en train de développer un site avec back-office, je me suis en même temps initié au modèle MVC et POO, je me suis largement aidé des fichiers sources de prestashop afin de comprendre les choses avant de tomber sur les tutos videos de graphikart.

J'ai donc réussi a faire ce que je voulais et j'en arrive a la partie la plus complexe du BO.
Maintenant, il faut que je développer une sorte d'éditeur wysiwyg qui permettra a l'administrateur de structurer sa page telle qu'il le souhaite, avec des blocs a placer (dans un conteneur subdivisé en 3 colonnes égales) dont il pourrait choisir la couleur et redimensionner, des photos, des zones de textes.

L'idée c'est que l'administrateur souhaite lui même composer son ensemble pour avoir un rendu graphique et différent d'une page a l'autre.

Le front se présente ainsi :

Le 1 représente une sidebar comprenant simplement le logo; (taille fixe)
Le 2 représente un menu vertical (taille fixe)
Le conteneur est subdivisé en 3 colonnes dans lesquels l'admin pourra y placer ses éléments.

Ca aurait pu se retrouver assez simple si le conteneur avait été fixe, mais voila le site doit être responsive et s’adapter a la taille de la fenetre du navigateur.
Dès lors qu'on la redimensionne la fenêtre, alors les colonnes et donc le contenu de celles-ci doivent se redimensionner proportionnellement. Le redimensionnement marcherait jusqu'a min-width:700px et max-width: 2600px (plus grand résolutions d'écran pour mac je crois) pour le conteneur, en dessous on passe en media-queries pour réadapter l'ensemble.

Le conteneur est donc dans le flux et prend toute la largeur restante de la fenêtre.
La largeur des colonnes sont en pourcentage (33.33%) afin qu'elles s'ajuste automatiquement.

Le back-office se présente donc de la même façon que le front-office,
Les colonnes par défaut font la même taille mais elles sont redimenssionnables individuellement en largeur (en hauteur elle s'adapte en fonction de ce que l'on vient y mettre dedans)

On garde ce principe de conteneur et de colonne visible;
Le 1 (taille fixe) représente une sidebar qui comprend diverses infos liése au site
et le 2 (taille fixe) représente la partie outils, soit les différents boutons, qui permettront :

• d'ajouter une zone de texte
• d'ajouter un bloc,
  -d'ajouter une image
  etc...

Une fois que l'admin a cliqué sur un des outils "ajouter", il devra drag and droppé son élément dans la colonne qui va bien.

On en vient donc à ma question : Quel est a votre avis la meilleure solution pour faire en sorte que que l’élément déposé dans la colonne soit toujours proportionnelle à sa colonne parente au niveau de sa taille, et également au niveau de sa position ?

Pour le drag and drop j'avais pensez a utilisez jquery ui avec sortable ou simplement le drag et le drop (pas encore fait mes tests)
Pour le positionnement faut-il mieux utiliser le flux ou le positionnement absolute, les deux ?
Bien que le positionnement absolute semble plus hard car il faudrait une multitude de calcul a chaque redimensionnement.

Sachant que :

• certaines choses devront pouvoir se superposer
  Ex : exemple avec le le texte sur un bloc couleur ou alors peut être dans un bloc couleur ?
• Possibilité de mettre en place des espaces blancs pour aéré.

Pour infos ce principe de redimensionnement est bien appliqué sur le site de graphéine, Mais à moindre mesure et que sur des images.

Je n'attends pas forcément de réponses concrètes mais aussi des suggestions auxquels je n'aurait pas pensés ou parce que je ne connais pas,
avant de me lancer tête baissée.

Merci par avance de vos retours.