Télécharger le résultat d'un drag n drop

**Wirginia** · 08/12/2015, 15h19

Bonjour,
Je cherche une solution pour pouvoir donner la possibilitée à l'internaute de técharger le résultat du drag n drop effectué
Merci pour votre aide !

**Jacques Beauregard** · 08/12/2015, 16h21

Bonjour et bienvenue sur le forum.

Qu'entends-tu par " télécharger le résultat du drag n drop " ?

N'hésite pas à nous fournir ton code pour y voir plus claire.
Cordialement.

**Wirginia** · 08/12/2015, 16h34

Merci pour ton retour !
Alors je suis en train de réaliser une carte postale.
On peut ecrire dedans (un textaera) et y glisser des "pictos".
Maintenant je veux pouvoir télécharger le résultat de la carte postale (le texte et le visuel intégrer dans la carte postale)

Voici mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html>
<head lang="fr">
    <meta charset="UTF-8">
    <title>Exercice Javascript</title>
 
    <style>
         #packt1, #packt2 {float:left; width:650px; height:450px;margin:11px;padding:11px;border:3px solid navy;}
         #packt2 {background-image: url(card.jpg);}
         #packt2 img{width:600px; height:400px;}
         *{text-align:center;}
                 p{margin:30px;padding:15px;}
 
                 #myP1{background:lightblue;}
                 #myP2{background:lightgreen;}
                 #myP3{background:lightyellow;}
                 @font-face  { font-family: "black_jack"; src: url('black_jack.ttf');}
 
                 textarea {
                        font-family:'black_jack';
                        font-size: 22px;
                        background-color: transparent;
 
}
 
    </style>
 
 </head>
 
 
    <body>
 
 
		<div id = "packt2" ondrop = "drop(event)" ondragover = "dropItem(event)"></div> 
 
		            <div>
 
		                <label for="copie"></label>
		                <textarea  id="copie" type="text" style="position: absolute;left: 46px;top: 250px;width: 600px;height: 200px;"></textarea>
 
		            </div>
 
		<a href="" download>Télécharger votre carte postale</a> ou <br />
 
		<label for="Excel"></label><input type="button" value="Export" onClick=javascript:Excel("")>
 
 
 
 
<!-- Drag & Drop -->
 
	<div  ondragover="pd(event)" ondrop="pd(event);drop(event)"  style="width:290px;height:290px;float:left;margin:25px;border:1px black solid;background:#fee;">
	  <p id="myP1" draggable="true" ondragstart="drag(event)"><img src="parapluie.png" alt""/></p>
	  <p id="myP2" draggable="true" ondragstart="drag(event)">Soleil</p>
	  <p id="myP3" draggable="true" ondragstart="drag(event)">Bisous</p>
	</div>
	<div  ondragover="pd(event)" ondrop="pd(event);drop(event)" ></div>
 
 
 
 
		<script>
                function pd(e){
                        e.preventDefault();
                }
        
                function drag(e){
                        e.dataTransfer.setData("temp", e.target.id);    
                }
 
                function drop(e){
                de=document.getElementById(e.dataTransfer.getData("temp")); //Draged Element Selected By ID
                tar=e.target //Target
                // These Conditions Are To Prevent Droping Three Paragraphs in Themselves 
                //You Can Test It Without this Condition.
                        if(e.target.parentNode.nodeName!="P"){
                                if((tar.nodeName=="DIV")||(tar.firstChild.nodeName="P"&&de.childNodes.length!=2))
                                {
                                        tar.appendChild(de);
                                }
                        }       
                }
 
                </script>
 
		<script>
                    
                    var texte = document.getElementById('texte'),
                    copie = document.getElementById('copie');
 
                texte.onkeyup = function () {
                    copie.value = texte.value;
                };
                </script>
 
 
		<script>
                         function dropItem(ev) { 
                   ev.preventDefault();}
                      function drag(ev){
                 ev.dataTransfer.setData("Text",ev.target.id);      }
                      function drop(ev) {        ev.preventDefault();        var abc = ev.dataTransfer.getData("Text");        ev.target.appendChild(document.getElementById(abc));      } 
                </script>
 
		<script>
                                function Excel (ext){
                                        document.FormulaireVersExcel.submit ()
                                }
                </script>
 
	</body>
</html>

**SpaceFrog** · 09/12/2015, 09h33

Il me semble me souvenir que j'ai vu passer un script sur la base d'un canvas qui permettait de faire cela,

sinon coté serveur avec par exemple gdlib tu construit l'image et tu en fais un forcedownload
http://mtodorovic.developpez.com/php/gd/?page=page_1

**Wirginia** · 10/12/2015, 09h40

Merci pour ton aide je vais aller tester ça de suite !

**Wirginia** · 10/12/2015, 10h18

Pas mal du tout !
J'étais persuadé qu'il existerait un script tout fait sans passer par le php pour enregistrer l'image mais en fait si il faut et quelque par c'est logique.
Ce n'est pas un problème pour moi je connais le php. J'ai été consulté php.net pour en savoir plus : http://php.net/manual/fr/book.image.php
et là effectivement tu as les fonctions pour télécharger ton image, une vraie mine aux trésors.
Merci beaucoup je commence bien ma journée !

Télécharger le résultat d'un drag n drop

JavaScript

Vue hybride

Discussions similaires

Partager

Partager