Javascript : Glisser / Déposer des éléments.

[Sonia Gazil]

Bonjour,

Dans le cadre d'un projet personnel, j'aimerai créer une administration interractive. J'ai donc décidé de me tourner vers un developpement AJAX. Le seul problème, c'est que mes notions en Javascript sont assez limitées. J'aurai donc besoin de vos conseils, car mes recherches sur la toile n'ont pas donné les réponses que j'esperai.

Voici, globalement, ce que j'aimerai faire : l'utilisateur pourra sélectionner les objets dans le menu bleu, et les faire glisser dans la zone orange pour les y insérer. Naturellement, il pourra insérer plusieurs fois le même objet ; Une fois qu'il aura glissé un objet dans la zone orange, cet objet apparaitra dans cet zone orange, mais apparaitra encore dans le menu bleu : cela signifie que ce n'est pas un véritable "glisser déposer", car un nouvel élément est créé.

J'aimerai également que les éléments de la zone orange puissent être réorganisé facilement.

D'après mes recherches sur le net, il faudrait utiliser la fonction "Drag and Drop" pour glisser - déposer les éléments. Seulement, je n'ai pas trouvé d'exemple simple, permettant de faire ce que je souhaite.

Pouvez vous me donner quelques pistes de recherche ? Connaissez vous de bons articles, de bons tutoriaux / cours ou encore de bons exemples ? (Par exemple, pour créer de nouveaux objets, ou encore pour les réorganiser.)

Merci d'avance.

[Dudu]

Salut, et bienvenue sur le Hub

Pouvez vous me donner quelques pistes de recherche ? Connaissez vous de bons articles, de bons tutoriaux / cours ou encore de bons exemples ? (Par exemple, pour créer de nouveaux objets, ou encore pour les réorganiser.)

Merci d'avance.

La première chose à faire est d'aller voir les démos de script.aculo.us

[Sonia Gazil]

Vraiment impressionnant.

Par contre, vous n'auriez pas un lien vers la documentation ? Leur lien est mort, et impossible de mettre la main dessus sur google.

Et sinon, pensez vous que je pourrai utiliser directement (sans modifier la class) leur script pour faire ce que j'ai besoin ? Est il directement adapté a mes besoins, ou devrais en réécrire une bonne partie ?

[Dudu]

Concernant script.aculo.us, leur license t'autorise à reprendre leurs exemples

Tu as aussi walterzon qui propose des libraires DHTML un peu plus anciennes

Sinon, voici un site qui utilise des drag&drop pour télécharger ses applications. Par contre, eux, n'ont pas vocation à servir ni d'exemple ni d'endroit où piocher ses scripts... mais tu peux t'en inspirer et ainsi adapter les exemples de script.aculo.us ou walterzon.

[Sonia Gazil]

En fait, ce que je veux faire est bien plus compliqué que je ne le pensais. Car le menu doit pemettre d'ajouter des elements, qui devront ensuite pouvoir etre organisé comme le souhaite l'utilisateur.

J'ai trouvé un exemple : Il est un peu plus complexe de ce que je veux, mais le principe est là. Le seul problème, c'est qu'ils ont rendu leur source totalement illisible (ce qui d'un coté peut se comprendre).

http://www.live.com/?mkt=fr-fr

[iznogood]

En fait, ce que je veux faire est bien plus compliqué que je ne le pensais. Car le menu doit pemettre d'ajouter des elements, qui devront ensuite pouvoir etre organisé comme le souhaite l'utilisateur.

J'ai trouvé un exemple : Il est un peu plus complexe de ce que je veux, mais le principe est là. Le seul problème, c'est qu'ils ont rendu leur source totalement illisible (ce qui d'un coté peut se comprendre).

http://www.live.com/?mkt=fr-fr

<{POST_SNAPBACK}>

Ouf!!! mais c'est d'un devellopeur pro dont tu as besoin pas d'un script

Voici pour ex : Clicque ici si c'est un truc comme ca que tu cherches ... essaye se SITE de script DHTML et java ensuite essaye d' ajuster les scripts a tes besoins.

[Spidetra]

tu as de plus en plus de librairie Ajax dispo sur le web.

Dudu a cité aculo.

Tu peux aussi trouver :

Drag and drop avec OpenRico

Tu as aussi Rialto une de mes préférées.

Tu trouveras un autre exemple ici, un de mes sites préférés en AJax

Si tu veux te mettre à l'Ajax, tu seras obligé de te mettre au Javascript pour le côté client ( + un langage pour le côté serveur).

Toutes ces librairies ne te serviront à rien si tu ne remonte pas les manches;

Courage....

[Sonia Gazil]

Donc j'ai un petit peu avancé depuis ce matin.

Pour créer de nouveaux éléments, je modifie la source avec javascript, en utilisant la propriété innerHTML. Maintenant, je suis en train de regarder comment je pourrai faire pour les réorganiser, puis pouvoir exploiter le tout par un script php.

En tout cas, merci beaucoup pour tous vos liens.

Le seul problème des librairies, c'est quand général, il ne sont pas complètement adapté a chaque problème : ça nous oblige alors de mettre le nez dans le code, un code très long et souvent incompréhensible.

[Dudu]

Le seul problème, c'est qu'ils ont rendu leur source totalement illisible (ce qui d'un coté peut se comprendre).

http://www.live.com/?mkt=fr-fr

Tellement illisible qu'il est interdit d'y accéder avec un OS différent de Windows: page blanche ()

en utilisant la propriété innerHTML.

C'est une propriété certes reconnue par tous les navigateurs, mais déconseillée Il est préférable d'utiliser getElementByID()

[Sonia Gazil]

C'est une propriété certes reconnue par tous les navigateurs, mais déconseillée Il est préférable d'utiliser getElementByID()

<{POST_SNAPBACK}>

Pourtant, l'utilisation que j'en fait n'a rien à voir.

Car j'utilise getElementByID() pour récupérer des élements, et innerHTML pour modifier leur contenu dynamiquement.

Par exemple :

var colone_gauche = document.getElementById("colone_gauche");
colone_gauche.innerHTML = 'nouveau contenu';

Ce code n'est pas recommandé ?

Comment faire alors pour modifier le contenu d'un élément ?

[Loupilo]

Ben je ne comprends pas trop... je pensais innerHTML très bien pour faire ce qu'il fait (et d'ailleurs je ne vois pas d'équivalent... tu préfères document.write() Dudu ? ).

Sinon, Windows Live marche pas avec Safari (et Konqueror) ni avec Opera, mais avec Firefox sous Linux, ça roule...

Donc il est quand même accessible à tous les SE (mais pas tous les navigateurs, c'est clair)