Publicité
+ Répondre à la discussion Actualité déjà publiée
Affichage des résultats 1 à 13 sur 13
  1. #1
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    22 373
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 22 373
    Points : 87 080
    Points
    87 080
    Billets dans le blog
    4

    Par défaut [Article] Ajouter un drag and drop sur sa page



    Je vous propose une traduction d'un tutoriel de Peter-Paul Koch : Drag and drop.

    Ce tutoriel vous présente comment implémenter une fonctionnalité de drag and drop. Cette fonction prend en charge la gestion de la souris mais aussi du clavier.

    N'hésitez pas à faire part de vos remarques concernant cet article.

    http://ppk.developpez.com/tutoriels/...ur-votre-site/

    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Invité de passage
    Profil pro
    Inscrit en
    décembre 2008
    Messages
    1
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : décembre 2008
    Messages : 1
    Points : 1
    Points
    1

    Par défaut PPK drag and drop

    Bonjour,
    je viens de m'en servir.
    Excellent article : non seulement ça marche mais on comprend pourquoi ! Compliments pour la traduction fluide et claire (si,si, ce n'est pas toujours le cas)

  3. #3
    Invité régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2011
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2011
    Messages : 7
    Points : 8
    Points
    8

    Par défaut Problème de code

    Bonjour,

    j'ai :
    -créé un page ne contient pas d'autre code
    -suivi les 6 étapes données dans la rubrique : "Utilisation".
    -récupérer le code du premier exemple (id='test')

    et pourtant quand je clique sur la div rien ne fonctionne contrairement à vôtre exemple .

    Je ne vois donc qu'une seule erreur possible : l'appel de la fonction init.

    Je l'ai placé ici :
    Code :
    <body onLoad="dragDrop.initElement('test')">
    et j'ai aussi essayé juste au dessus du code que vous demandez de copier.

    Mais aucun résultat.
    J'ai alors placé une balise alert() pour tester l'appel de la fonction et celle-ci ne pose pas de problème.

    Auriez vous une idée ? (Je suis sous mozila firefox 5.0)

    Cordialement.
    newVision

  4. #4
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    22 373
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 22 373
    Points : 87 080
    Points
    87 080
    Billets dans le blog
    4

    Par défaut

    Difficile à dire comme ça...
    Tu aurais une page d'exemple à fournir ?
    Au pire, as-tu une erreur signalée dans Firebug ?
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Invité régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2011
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2011
    Messages : 7
    Points : 8
    Points
    8

    Par défaut Page pour le test

    Je vous présente mes excuses pour l'affichage brute, mais la balise code m'a gérer une multitude d'erreur php x) .

    Sinon il y avait bien un message d'erreur disant que dragDrop n'était pas défini. Je ne vois pas pourquoi oO.

    Code html :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    	<head>
    		<title>Test</title>
    		<STYLE type="text/css">
    			a{
    				position : fixed;
    			}
     
    			div{
    				border : 2px solid blue;
    				width : 210px;
    			}
    		</STYLE>
    	</head>
     
    	<body onLoad="dragDrop.initElement('test')">
    		<div id="test" class=" ">
    			Exemple de drag and drop, élément en
    			<code>position: fixed</code>
    			.
    			<a class="keyLink" href="#">#</a>
    		</div>
     
    		<script language="Javascript">
     
     
     
    		dragDrop = {
    	keyHTML: '<a href="#" class="keyLink">#</a>',
    	keySpeed: 10, // pixels per keypress event
    	initialMouseX: undefined,
    	initialMouseY: undefined,
    	startX: undefined,
    	startY: undefined,
    	dXKeys: undefined,
    	dYKeys: undefined,
    	draggedObject: undefined,
    	initElement: function (element) {
     
    		if (typeof element == 'string')
    			element = document.getElementById(element);
    		element.onmousedown = dragDrop.startDragMouse;
    		element.innerHTML += dragDrop.keyHTML;
    		var links = element.getElementsByTagName('a');
    		var lastLink = links[links.length-1];
    		lastLink.relatedElement = element;
    		lastLink.onclick = dragDrop.startDragKeys;
    	},
    	startDragMouse: function (e) {
    		dragDrop.startDrag(this);
    		var evt = e || window.event;
    		dragDrop.initialMouseX = evt.clientX;
    		dragDrop.initialMouseY = evt.clientY;
    		addEventSimple(document,'mousemove',dragDrop.dragMouse);
    		addEventSimple(document,'mouseup',dragDrop.releaseElement);
    		return false;
    	},
    	startDragKeys: function () {
    		dragDrop.startDrag(this.relatedElement);
    		dragDrop.dXKeys = dragDrop.dYKeys = 0;
    		addEventSimple(document,'keydown',dragDrop.dragKeys);
    		addEventSimple(document,'keypress',dragDrop.switchKeyEvents);
    		this.blur();
    		return false;
    	},
    	startDrag: function (obj) {
    		if (dragDrop.draggedObject)
    			dragDrop.releaseElement();
    		dragDrop.startX = obj.offsetLeft;
    		dragDrop.startY = obj.offsetTop;
    		dragDrop.draggedObject = obj;
    		obj.className += ' dragged';
    	},
    	dragMouse: function (e) {
    		var evt = e || window.event;
    		var dX = evt.clientX - dragDrop.initialMouseX;
    		var dY = evt.clientY - dragDrop.initialMouseY;
    		dragDrop.setPosition(dX,dY);
    		return false;
    	},
    	dragKeys: function(e) {
    		var evt = e || window.event;
    		var key = evt.keyCode;
    		switch (key) {
    			case 37:	// gauche
    			case 63234:
    				dragDrop.dXKeys -= dragDrop.keySpeed;
    				break;
    			case 38:	// haut
    			case 63232:
    				dragDrop.dYKeys -= dragDrop.keySpeed;
    				break;
    			case 39:	// droite
    			case 63235:
    				dragDrop.dXKeys += dragDrop.keySpeed;
    				break;
    			case 40:	// bas
    			case 63233:
    				dragDrop.dYKeys += dragDrop.keySpeed;
    				break;
    			case 13: 	// Touche Entrée
    			case 27: 	// Touche Echap.
    				dragDrop.releaseElement();
    				return false;
    			default:
    				return true;
    		}
    		dragDrop.setPosition(dragDrop.dXKeys,dragDrop.dYKeys);
    		if (evt.preventDefault)
    			evt.preventDefault();
    		return false;
    	},
    	setPosition: function (dx,dy) {
    		dragDrop.draggedObject.style.left = dragDrop.startX + dx + 'px';
    		dragDrop.draggedObject.style.top = dragDrop.startY + dy + 'px';
    	},
    	switchKeyEvents: function () {
    		// for Opera and Safari 1.3
    		removeEventSimple(document,'keydown',dragDrop.dragKeys);
    		removeEventSimple(document,'keypress',dragDrop.switchKeyEvents);
    		addEventSimple(document,'keypress',dragDrop.dragKeys);
    	},
    	releaseElement: function() {
    		removeEventSimple(document,'mousemove',dragDrop.dragMouse);
    		removeEventSimple(document,'mouseup',dragDrop.releaseElement);
    		removeEventSimple(document,'keypress',dragDrop.dragKeys);
    		removeEventSimple(document,'keypress',dragDrop.switchKeyEvents);
    		removeEventSimple(document,'keydown',dragDrop.dragKeys);
    		dragDrop.draggedObject.className = dragDrop.draggedObject.className.replace(/dragged/,'');
    		dragDrop.draggedObject = null;
    	}
    }
    function addEventSimple(obj,evt,fn) {
    	if (obj.addEventListener)
    		obj.addEventListener(evt,fn,false);
    	else if (obj.attachEvent)
    		obj.attachEvent('on'+evt,fn);
    }
     
    function removeEventSimple(obj,evt,fn) {
    	if (obj.removeEventListener)
    		obj.removeEventListener(evt,fn,false);
    	else if (obj.detachEvent)
    		obj.detachEvent('on'+evt,fn);
    }
    		</script>
    	</body>
    </html>

  6. #6
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    22 373
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 22 373
    Points : 87 080
    Points
    87 080
    Billets dans le blog
    4

    Par défaut

    Le lien (#) est ajouté automatiquement par le script, il ne faut donc pas l'inclure dans la page.
    D'autre part, c'est la div test qu'il faut mettre en absolute, pas le lien.
    Remplace dans le CSS
    Code css :
    1
    2
    3
    a{
    	position : fixed;
    }
    par
    Code css :
    1
    2
    3
    #test{
    	position : fixed;
    }
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  7. #7
    Invité régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2011
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2011
    Messages : 7
    Points : 8
    Points
    8

    Par défaut Problème résolu

    Merci pour la réponse, en effet il n'y a plus de problème une fois que le css est en place.

    Un grand merci pour le tuto et vôtre aide .

  8. #8
    Invité régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2011
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2011
    Messages : 7
    Points : 8
    Points
    8

    Par défaut Deux images sur une page

    Bonjour,

    c'est encore moi .

    Je me suis servi du script pour ma zone d'administration.
    L'admin se sert du drag & drop pour placer son image puis avec de l'ajax on envoie ses données à la bdd et lors de l'affichage de la page, pour les visiteurs on met l'image en absolute, et tout fonctionne à la perfection. Alors juste pour ça : encore merci pour le tuto .

    Mais j'ai intégré une deuxième image (dans le tuto vous en avez 2 : une en fixe et l'autre en absolute => pour ma part : 2absolute) et là c'est le hic. L'une fonctionne mais pas l'autre, alors que les deux indépendamment ne posent pas de problème .

    Est-ce qu'il peut y avoir conflit ?

    Pour un petit bout de code :
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
     
     <style type="text/css">
     
    			#divImg0{
    				position : absolute;
    			}
    			#divImg1{
    				position : absolute;
    			}       
    </style>
     
    <body onLoad='onLoadJS()' >
    ...
    <div id="divImg0" class=" ">
    	<img src="./upload/img/mozilla_firefox.png" alt="mozilla_firefox.png">
    </div>
    <div id="divImg1" class=" ">
    	<img src="./upload/img/bodycote.PNG" alt="bodycote.PNG">
    </div> 
    ...
    function onLoadJS(){	
    	dragDrop.initElement('divImg0');
    	dragDrop.initElement('divImg1');			
    }
    ...
    </body>
    Je suppose que le problème vient du fait que je donne 2arguments différents à la même fonction.
    Je voudrais donc savoir comment vous avez fait dans le tuto, car je n'arrive pas à trouver l'appel des fonctions.

    Cordialement.
    newVision

  9. #9
    Invité régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2011
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2011
    Messages : 7
    Points : 8
    Points
    8

    Par défaut Réponse pour x Images sur la page

    Voici le code miracle .

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    //Côté Html
    <div id="divImg0" class=" ">
         <img src="./upload/img/mozilla_firefox.png" alt="mozilla_firefox.png" onClick="dragDropInit('divImg0')">
    </div>
     
    //Côté javaScript
    function dragDropInit(nomElement){
    	dragDrop.initElement(nomElement);
    }
    Par contre il faut avoir 1seconde de patience .

    En effet, il faut cliquer une première fois sur l'image, attendre 1seconde (vous pouvez relacher le clic x), je pense que c'est le temps d’exécution du script). Et ensuite recliquer pour la déplacer .
    Mais ça marche pour x images ^^ .

  10. #10
    Invité de passage
    Inscrit en
    juillet 2011
    Messages
    1
    Détails du profil
    Informations forums :
    Inscription : juillet 2011
    Messages : 1
    Points : 1
    Points
    1

    Par défaut Div et ascenseur

    Bonjour,

    Ce script marche parfaitement, merci de l'avoir partagé et ce avec les explications.

    Cependant j'ai un problème dans un cas: les ascenseurs dans les div que je souhaite pouvoir déplacer (avec un overflow à auto).
    Si je clique avec le bouton gauche de la souris sur l'ascenseur, il remplit sa fonction.
    Par contre dès que je relâche le bouton gauche de la souris la div se met à se déplacer sans qu'aucune action ne permette d'arrêter le déplacement.

    Une idée pour que l'ascenseur ne soit pas pris en compte dans l'élément que je souhaite déplacer ?
    Ou pour faire en sorte que le relâchement du bouton gauche de la souris soit bien pris en compte par le script ?

  11. #11
    Invité régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2011
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2011
    Messages : 7
    Points : 8
    Points
    8

    Par défaut Textarea : multiplication

    Bonjour,

    c'est encore moi .

    J'ai voulu mettre un textarea. Et ça marche à la perfection, pour ce qui est de le déplacer.
    Mais par contre, ça en créer un autre à chaque clique .

    Est-ce que vous auriez une solution ?
    Le script réagit ainsi dès qu'on met un élément du formulaire (input, select etc... ).

    Mes excuses pour le dérangement que j'engendre une fois de plus .

  12. #12
    Invité régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    juillet 2011
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : juillet 2011
    Messages : 7
    Points : 8
    Points
    8

    Par défaut Textarea : multiplication -> "solution"

    Bonjour,

    en relisant le tutoriel et plus précisément l'initialisation, je me suis aperçu qu'il fallait supprimer la ligne :

    Code :
    element.innerHTML += dragDrop.keyHTML;
    De cette façon, la balise du textarea n'est pas ajoutée.
    Cependant, ceci devrait avoir une incidence sur l'utilisation du clavier (d'après ce que j'ai pu comprendre avec le tutoriel).

    En espérant que ceci aidera d'autres personnes .

    newVision

  13. #13
    Invité de passage
    Femme Profil pro
    Inscrit en
    janvier 2011
    Messages
    42
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations forums :
    Inscription : janvier 2011
    Messages : 42
    Points : 4
    Points
    4

    Par défaut

    Bonjour,

    Merci pour ce tuto bien simpa et très clair.
    Toutefois j'ai une question à poser. Les images s'affiche en taille réelle, comment faire pour les redimensionner??
    Merci d'avance

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •