Options : Feed RSS 2.0 - Commentaires - Trackback.
juillet
2006
Drag & Drop entre plusieurs listes en javascript
Ce script permet de déplacer des éléments entre plusieurs listes afin d'avoir un menu comme la page personalisée de Google.
Le code de base est celui de Tool-man. Une version modifée supportant le drag & drop entre listes est trouvable à cette adresse : http://neb.net/playground/dragdrop/.
J'ai modifié cette dernière version afin d'éviter qu'un élément soit supprimé s'il était laché en dehors d'une liste. J'ai aussi amélioré le drag & drop, les éléments cherchent maintenant la liste la plus proche lors du déplacement.
Un exemple est disponible ici : http://www.xele.org/dragdrop/
Les scripts à utiliser sont ceux-ci :
Utilisation : les balises LI et UL doivent avoir un attributs id et les balises LI doivent avoir un style position:relative.
Mise à jour :
Ajout de deux fichiers javascript pour sauvegarder les positions des divs dans un cookie et les restaurer au chargement suivant de la page.
[3 Octobre 2006] Mise à jour
Ajout d'une fonctionalité pour pouvoir indiquer un élément qui servira à déplacer un bloc LI. Il faut déclarer ces éléments avec une classe spéciale. Si un bloc ne contient pas cet élément, tout le bloc pourra être utilisé pour le déplacement. Voir la page d'exemple et sa source pour plus d'infos.
Les fichiers modifiés sont dragdrop.js et drag.js
sympa, je note, ça pourrait être utile
pas mal aussi j’en prend aussi note
Salut, j’aimeré savoir s’il est possible avec ton script de définir une zone cliquable a l’intérieur d’un LI?
En fait j’aimeré rendre possible le drag and maisseulement sur une zone du LI pas sur l’ensemble, j’ai essayé d’adapté ton code en utilisant le Handle mais je n’y arrive pas, pourrais tu m’aider stp?
Merci
Mise à jour du script pour rajouter la fonctionalité
bonjour, superbe taf…
pourriez vous me renseigner? je cherche le moyen de modifier votre script afin de ralentir le retour dans les liste1 ou 2 quand on lache l’element en dehors de celle ci.
Autrement dit, si je tire l’élément 1 en dehors de liste 1 ou liste 2, il revient presque instentanement dans la liste la plus proche. j’aurais préféré qu’il revienne plus doucement.
merci encore!
Lords Mansion
de plus si je ne m’abuse, les formulaire (form) ne sont plus clicable, en clair on ne peut plus entrer le nom d’utilisateur apr exemple si c’est un bloc de connexion.
si la textarea ddu commentaire que je suis entrain d’ecrire etait un des élements, je ne pourrais pas ecrire dedans. ce qui je pense est relativeent problématique.
1) Pour modifier le retour dans la bonne liste, il faudrait modifier dans le fichier dragdrop.js la fonction onDragEnd et remplacer ceci :
this.style[”top”] = “0px”;
this.style[”left”] = “0px”;
par une fonction personnalisée qui modifierait ces deux valeurs tout les X millisecondes (voir la fonction setTimeout() en javascript) jusqu’à 0px.
2) Pour le formulaire ça ne pose pas vraiment de problème je pense, a part si on veut sélectionner le texte. Mais il vaut mieux dans ce cas utiliser les handler afin de ne rendre qu’une partie de la boite sélectionnable pour le déplacement.
merci beaucoup de votre réactivité!
je vais me pencher sur ces 2 points immédiatement.
en effet rendre selectionnable une partie du bloc et non pas le bloc entier est une solution.
je vai essayer d’adapter aussi le script afin qu’il puisse gerrer 3 ou 4 et non pas 2 puisque cela bloque dés la 3ème…
merci encore.
salut! j’ai enfin compris comment multiplier les ul permettant le drag and drop sur plusieurs endroits. c’est trés simple en fait.
en revanche, j’ai trouvé un bug au niveau du cookies.
je n’utilise pas le script sur une page html, mais sur une page php.
Quand plusieurs personnes, usent et re-usent du drag and drop, je ne peux expliquer pourquoi, mais la position, bien que retenu par le cookies (j’ai verifié en ouvrant le cookie) ne recharge plus les info, et les elements reprennent leurs places d’origine comme si rien n’avait etait enregistré …
ca fait 6 fois que je refais la page, et 6 fois que dés lors qu’un amis vient tester, le cookies ne repond plus ni pour moi, ni pour lui :’(
je vas essayer de retravailler le cookies pour voir si c’est ca qui cloche.
en tout cas merci beaucoup de votre fantastique travail! si vous avez remarquer le meme probleme, et ou avait une idée concernant mon probleme… n’hésitez pas hein…
une page de test:
http://www.fauxrhum.com.free.Fr
dans le menu de gauche, choisir le theme fst
++
Bonjour, et merci pour ces scripts, ils m’inspirent, mais je ne sais pas si c’est tout à fait utilisable.
Je cherche à faire un rapprochement entre une liste de champs d’une table mysql et une liste de champs issue d’un fichier CSV. Je veux mettre face à face les champs correspondant entre eux.
Est-ce sur ce système là que je dois me baser, ou plutôt sur un autre système qui consisterait simplement à trier une des 2 listes pour la faire correspondre à l’autre.
Voila, je suis en train de creuser cela.
Merci encore
bien joué. script nickel.
Hello !
Excellent script et facile à utiliser en plus.
Mais j’ai un problème : Ca ne fonctionne pas avec IE6 !
Avec Firefox, pas de problème, bien sûr…
Suis-je le seul ?
Merci d’avance pour ce beau boulot !
Fred
Finalement non, ça marche bien.
Mon problème vient d’une toute petite image que IE met un temps infini à charger, ce qui doit empêcher l’exécution du script…
Après réactualisation, l’image apparaît bien et le script fonctionne. C’est étrange et c’est même gênant, car mon javascript est inopérant pendant ce temps. Je vais devoir creuser pour savoir ce qui provoque ce “blocage” lors du chargement d’une image…
Merci pour ce script !
Fred