Dksdragdrop : une bibliothèque de drag and drop et de gestion de souris
Soyez le premier à donner votre avis sur cette source.
Vue 10 799 fois - Téléchargée 852 fois
Description
Il s'agit d'une petite bibliothèque dont je me sers dans plusieurs projets qui permet de gérer les déplacement de div sur un page.
Elle permet de définir quels div peuvent être déplacés, la couleur et la largeur de la bordure lors du déplacement, et les fonctions de drag (début de drag, drag, fin de drag) qui vont par pair : la fonction de début qui doit retourner vrai si le drag doit être fait, sinon false.
Elle permet de gérer le click et le double-click sur les div qu'on lui passe en paramètre, avec là aussi les deux fonctions : début et fin du click ou double-click.
Elle permet de gérer les boutons permettant de déplacer les éléments : par défaut, tous, mais vous pouvez lui spécifier lequel vous voulez utiliser (attention aux incompatibilité firefox/IE !)
Elle permet de définir si vous voulez que l'élément déplacé soit affiché devant les autres ou pas.
J'ai mis en zip un exemple concret avec 4 div : 2 qui sont déplacable, l'une qui ne l'ai pas car non envoyée à la librairie (et donc, il n'y a pas de gestion de profondeur de la div) et une autre qui n'est pas déplacable, mais gérée par la bibliothèque (il y a donc prise en compte de la position sur Z de la div pour le déplacement des autres div).
Pour un exemple plus pratique, voir ma source de freecell par exemple.
Elle permet de définir quels div peuvent être déplacés, la couleur et la largeur de la bordure lors du déplacement, et les fonctions de drag (début de drag, drag, fin de drag) qui vont par pair : la fonction de début qui doit retourner vrai si le drag doit être fait, sinon false.
Elle permet de gérer le click et le double-click sur les div qu'on lui passe en paramètre, avec là aussi les deux fonctions : début et fin du click ou double-click.
Elle permet de gérer les boutons permettant de déplacer les éléments : par défaut, tous, mais vous pouvez lui spécifier lequel vous voulez utiliser (attention aux incompatibilité firefox/IE !)
Elle permet de définir si vous voulez que l'élément déplacé soit affiché devant les autres ou pas.
J'ai mis en zip un exemple concret avec 4 div : 2 qui sont déplacable, l'une qui ne l'ai pas car non envoyée à la librairie (et donc, il n'y a pas de gestion de profondeur de la div) et une autre qui n'est pas déplacable, mais gérée par la bibliothèque (il y a donc prise en compte de la position sur Z de la div pour le déplacement des autres div).
Pour un exemple plus pratique, voir ma source de freecell par exemple.
Source / Exemple :
// voir le zip
Codes Sources
A voir également
- Bibliothèque javascript
- Souris drag click - Meilleures réponses
- Drag js - Meilleures réponses
- Javascript : Jslib (bibliothèque javascript, v1.3) - CodeS SourceS - Guide
- Javascript : Jslib (bibliothèque javascript, v1.2) - CodeS SourceS - Guide
- Récupérer données json (javascript) - Conseils pratiques - Javascript
- Javascript connexion base de données - Conseils pratiques - Javascript
- Javascript poo - Conseils pratiques - Javascript
5 avril 2009 à 07:03
Je ne parviens pas à faire fonctionner le script quand le style css de la div est placé dans une feuille de style, et non plus directement !
J'ai eus le problème sur d'autre script que j'ai corrigé par l'utilisation de GetId().style !
- Messages postés
-
15814
- Date d'inscription
- jeudi 8 août 2002
- Statut
- Modérateur
- Dernière intervention
- 4 mars 2013
13111 mars 2008 à 19:23
Merci pour ta remontée d'info bultez ;)
- Messages postés
-
13616
- Date d'inscription
- jeudi 13 février 2003
- Statut
- Membre
- Dernière intervention
- 15 octobre 2013
3211 mars 2008 à 14:40
semble ne plus fonctionner, sous FF, avec la dernière version ?
Erreur : e has no properties
Fichier source : file: dksDragDrop.js, Ligne : 227
me trompe-je ? ha la gestion de event...
- Messages postés
-
15814
- Date d'inscription
- jeudi 8 août 2002
- Statut
- Modérateur
- Dernière intervention
- 4 mars 2013
1318 mars 2008 à 11:51
Gestion du bouton de la souris (possibilité de déplacer qu'avec un seul bouton) et la gestion du zIndex : voulez-vous que l'élément déplacé se place devant les autres ou non.
J'ai également rajouté la possibilité de définir le curseur lors du mouseover sur les éléments.
Et correction du problème pour le scroll de la page.
Par contre, coucou747, j'ai pas réussi à utilise les prototype en plus des namespaces :( Si quelqu'un sait comment faire, je suis preneur !
- Messages postés
-
3426
- Date d'inscription
- lundi 26 décembre 2005
- Statut
- Membre
- Dernière intervention
- 14 janvier 2011
184 mars 2008 à 22:06
2 petits points rapidement
- un cursor de type move serait le bien venu
- cela ne marche plus si l'on scroll la page
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.