begin process at 2010 03 21 19:06:38
  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é :6 764 / 558

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

HTML_ENTITIES_DECODE par zen69
ACCÈS À LA MÉTHODE SETATTRIBUTE('STYLE','') SOUS IE6 par masternico
OUTIL DE SÉLECTION par jdmcreator
Source avec Zip SIMPLIFIER LA CREATION DYNAMIQUE D'ELEMENT HTML par kazma
DÉTECTER SI CSS EST ACTIVÉ par jdmcreator

 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

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

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 &#224; tous !Est-il possible d'appliquer la fonction Drag &amp; 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 ] &nbsp;ouaip je suis un novice en flash et dans le cadre&nbsp; de mon projet&nbsp; tutor&#233; de fin dann&#233;e en iut service et r&#233;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 &amp; drop à mon site, i


Nos sponsors


Sondage...

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
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,858 sec (3)

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