begin process at 2012 05 27 15:43:21
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Trucs & Astuces

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

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


 Information sur la source

Note :
Aucune note
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é :8 512 / 666

Auteur : DARKSIDIOUS

Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
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

Les Membres Club peuvent 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

 Sources du même auteur

Source avec Zip Source avec une capture FREECELL : LE JEU DE FREECELL DE WINDOWS
Source avec Zip Source avec une capture DKSPROGRESSBAR : UNE PROGRESSBAR IMAGÉE QUI CHANGE DE COULEU...

 Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator
CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol

 Sources en rapport avec celle ci

Source avec une capture DRAG/DROP/REDIMENSIONNER... par sitajony
Source avec Zip Source avec une capture DRAG DROP DE VIDEOS par kazma
DRAG & DROP SIMPLE, SIMPLE, SIMPLE par jdmcreator
"DRAG" DE BLOC <DIV> par slog9
Source avec Zip Source avec une capture BOXMANAGEMENT: COMME LA PAGE D'ACCUEIL PERSONALISÉE DE GOOGL... par the_wwt

Commentaires et avis

Commentaire de coucou747 le 02/03/2008 21:19:24 administrateur CS

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

Commentaire de XtremDuke le 03/03/2008 09:50:04

Très sympatique car très efficace :)

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 ?

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.

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

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 !

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...

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 ;)

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

Désactiver des liens lors d'un dragging... [ par VicTeams ] Bonjour à tous, je ne sais pas si c'est dans la bonne catégorie, je ne connais pas bien le js... Enfaite j'ai besoin de votre aide car depuis avant h Problème de drag&drop [ par hellotk ] Bonjour à tous, je rencontre un problème lié au drag&drop : j'ai sur ma page plusieurs DIV (contenant des photos) dont la fonction drag&drop est app drag and drop entre listbox [ par cod26 ] Bonjour, je débute en js, J’ai besoin d’aide pour faire un drag and drop entre 2 listbox en JavaScript Je fais glisser un élément de la première lis Drag and Drop [ par Killion ] Bonsoir,Je suis a la recherche d'un script de drag and drop, je suis tombé sur scriptaculous et sur rico... Mon problème est le suivant: j'aimerai pou drag and drop [ par moukit233 ] slt js un debutant avec dojo ....je veux un methode Me permettre de de activer les changement de ma fonction deplacer avec drag and drop sans fait act Drag and drop d'une image sur mon PC vers internet [ par jeanmorelle ] Bonjour, Est-il possible de faire un drag and drop d'une image présente sur mon ordinateur vers un site internet, dans un endroit prévu pour recevoir drag and drop suvit d'une modification [ par plopinou ] Bonjour a tous,JE vous explique mon problème :J'ai fait un drag and drop qui marche comme ceci :on a 4 choix sur la droite, titre, titre + photo, desc Drag and Drop & sélection [ par Drazounet ] Bonjour à tous !Je suis en train de développer un système de Drag and Drop, et jusque là, tout fonctionne très bien.J'ai juste un petit soucis avec IE Panier Drag & Drop [ par saidaMil3aka ] Bonjour à tous,Le drag and drop ici : http://demo.script.aculo.us/shop est exactement ce que j'aimerai réaliser .Mais loin d'être une expérte en AJAX Ouvrir un div + drag&drop [ par yanis7518 ] Salut a tousvoila j'ai une page avec un div fermé(mais que l'on peut ouvrir en cliquant sur un bouton) dans ce div je peux faire des drag&amp;drop d'o


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,827 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales