Conception ajax avancée (tree, drag & drop, Screw)
Bonjour,
je doit développer pour un site en php, javascript un page affichant un plan de lecture du style :
Citation:
Item 1 - Les auteurs romantiques au 19ème s.
Item 1.1 - Les poètes
Item 1.1.1 - Goethe
Item 1.1.2 - Whitman
Item 1.2 - Les romanciers
Item 1.2.1 - Poe
Chaque item (à tous les niveaux) peut avoir 0 ou plusieurs Textes associés.
Les plans sont définis dans une table mysql.
Au chargement de la page, on sait déjà quel plan on va afficher; il est donc possible de construire l'arbre correspondant et de l'afficher en récupérant dans d'autres tables les informations sur les Textes.
Pour des performances convenables, je comptais construire l'arbre au chargement en php, avec une classe Item qui peut avoir comme propriétés une liste d'Item.
Ensuite, afficher celui-ci (pour l'instant sans plugin jQuery style jstree); utiliser le plugin jQuery.Screw pour charger dynamiquement et de manière asynchrone les Textes associés à chaque Item. (cf ce site pour un exemple de rendu, méthode). Cela donne un défilement vertical tant qu'il y a du contenu a afficher.
A cela, j'ai ajouté un système d'accordéon avec SlideToggle() pour afficher / masquer chaque Item et Texte (représenté par un titre, des métadonnées et un texte xml).
J'ai réussi à monter une solution comme celle-ci pour tester.
Toutefois...
Il faudrait aussi que les utilisateurs puissent effectuer des drag and drop sur leur plan; déplacer des Items, des Textes et sauvegarder ces modifications automatiquement. Pour cela, je comptais mettre en place une solution comme celle-ci ou celle-la.
SI vous avez eu le courage de tenir jusque là (ma question arrive bientôt :) ), il faudrait aussi prévoir d'ajouter et supprimer des Items et Textes :? .
Enfin, je suis un peu à la limite de mes compétences javascript, ajax; et, je voudrais savoir si j'ai choisit la bonne méthode.
En premier lieu, si je construit mon plan en php (pas avec javascript, ajax); pourrais-je ensuite faire du drag and drop, ajouter / supprimer des items sans recharger toute ma page?
Je ne suis vraiment pas sûr :? , et ce n'est pas un petit développement.
Ensuite, connaissez vous une autre méthode? comment auriez vous fait?
Je suis sincèrement reconnaissant de votre aide.
