Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

DKSDRAGDROP : UNE BIBLIOTHÈQUE DE DRAG AND DROP ET DE GESTION DE SOURIS


Information sur la source

Catégorie :Trucs & Astuces Classé sous : drag, drop, dragdrop, déplacer, déplacement Niveau : Débutant Date de création : 02/03/2008 Date de mise à jour : 08/03/2008 11:53:17 Vu / téléchargé: 5 822 / 475

Note :
Aucune note

Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note


Description

Cliquez pour voir la capture en taille normale
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.
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

08 mars 2008 11:48:53 :
Prise en compte des remarques effectuées : gestion du bouton de la souris, gestion du zIndex, ajout de l'icône de déplacement, et refactoring total de tout le code !
08 mars 2008 11:53:17 :
Je m'étais planté dans le zip

Commentaires et avis

signaler à un administrateur
Commentaire de coucou747 le 02/03/2008 21:19:24

pour tes className.prototype.fonctionName=function(){...} tu devrais les mettre en dehors du constructeur, et mettre ca pour chaque fonction

signaler à un administrateur
Commentaire de XtremDuke le 03/03/2008 09:50:04

Très sympatique car très efficace :)

signaler à un administrateur
Commentaire de rambc le 03/03/2008 16:16:53

Pas mal, mais il manque peut être quelque chose d'intéressant. Un clic gauche permettrait de passer par dessus tout et un clic droit de garder les z-index. Qu'en penses-tu DARKSIDIOUS ?

signaler à un administrateur
Commentaire de DARKSIDIOUS le 03/03/2008 19:28:52 administrateur CS

Merci à tous !

coucou747 : va vraiment falloir que je me renseigne sur les namespace avant :p

rambc : pourquoi pas ! J'intégrerais cà dans la prochaine version.

signaler à un administrateur
Commentaire de PetoleTeam le 04/03/2008 22:06:28

Bonjour à tous
2 petits points rapidement
- un cursor de type move serait le bien venu
- cela ne marche plus si l'on scroll la page

signaler à un administrateur
Commentaire de DARKSIDIOUS le 08/03/2008 11:51:55 administrateur CS

Voilà, la source est mise à jour en prenant en compte les remarques formulées :
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 !

signaler à un administrateur
Commentaire de bultez le 11/03/2008 14:40:55

très intéressant.
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...

signaler à un administrateur
Commentaire de DARKSIDIOUS le 11/03/2008 19:23:39 administrateur CS

tiens ? bizarre cà ! J'ai pas le temps de regarder cà ce soir, mais je vais m'en préoccuper ! Pourtant je test sous ff 2.0.12 comme sous ie 7 !

Merci pour ta remontée d'info bultez ;)

signaler à un administrateur
Commentaire de GuismoJames le 05/04/2009 07:03:13

Bonjour,

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 !

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

DRAG DROP JAVASCRIPT [ par webboy ] Bonjour,J'ai une page coup en 2 frame (bas & centre)Dans la frame bas g un tableau de 6 celulles comprenant chacune un div avec un idje voudrais drage [javascript] treview drag drop [ par ichevc ] Bonjour, je suis debutant en javascript,je cherche soit a recuperer soit de la documentation pour faire :un menu hierarchique (treeview) supportant le Drag Drop dans un formulaire ? [ par wasabi12 ] Bonjour à tous !Est-il possible d'appliquer la fonction Drag & Drop dans un formulaire. Je m'explique. Par exemple, j'ai une liste de personn quelqu'un sait-il faire un tel drag and drop ? [ par Thieums ]  ouaip je suis un novice en flash et dans le cadre  de mon projet  tutoré de fin dannée en iut service et réseau de comm drag and drop [ par sendlyne ] http://www.walterzonrn.de Quelqun peut il aller voir sur le lien et m'expliquer. Ca à l'air bien malheureusement je ne suis pas assez qualifiée en drag and drop de fichier d'internet explorer vers une autre appli [ par poulp ] Je cherche a copier un fichier d'une page web sur mon disk dur ou dans une application simplement par l'intermédiaire du drag and drop. Par exemple j' Bug drag and drop sous IE ? [ par funkysim ] Bonjour, Je rencontre un problème avec du drag and drop d'iframe sur une autre iframe.C'est à dire que le déplacement de l'iframe fonctionne très ma Toolbox et Drag & Drop [ par Kendryl ] Bonjour,Etant novice en javascript et ne trouvant pas de tutorial sur google (je ne comprends que très mal l'anglais) , je vous demande conseils pour Drag and drop [ par ger91lou ] Voilà mon problème:A partir de l'exemple de quiz fourni avec macromedia flash 8 pro.A gauche j'ai 4 cases qui représentent 4 mots d'une phrase en déso Drag & Drop [ par 0mido0 ] Bonjour, Je vient d'utiliser le code source télécharge de site http://www.cyberdummy.co.uk/test/dd.php pour appliquer le drag & drop à mon site, i


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,406 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.