drag and drop avec plusieurs éléments
Bonjour à tous,
Je suis webmaster d'un site météorologique qui a était mis en ligne très récemment. Notre site dispose d'une carte de la France qui nous sert en quelques sortes à mettre en place des phases de surveillance vis à vis de phénomènes météo pouvant être importants. Seulement pour mettre à jour cette carte, avec mon associé nous utilisons photofiltre, et vous serez daccord avec moi, ce n'est pas le top...
Pour remédier à cela j'aimerais créer un module de prévisions de la sorte :
- Une carte de la france en fond (la cible)
- Une liste de pictogramme (la source) que je glisse et dépose sur cette carte
...Suivis d'un enregistrement de la carte lorsqu'elle est finie.
Je me suis donc renseigné sur le drag and drop et est commencé à développer un peu cela.
Mon premier problème est que je n'arrive qu'à déplacer un seul picto, en l'occurence le premier. Et mon second problème est que le picto se retire de la liste une fois déplacer alors que j'aimerais que les pictos soit infinis dans le menu. Je vous laisse mon code en espérant que vous pourrez m'aider :roll:
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
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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Module de prévisions</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="utilities.js"></script>
<style type="text/css">
.dd-demo {
position:relative;
border:4px solid #666;
text-align:center;
color:#fff;
cursor:move;
height:30px;
width:30px;
}
#dd-soleil-1 {
background:url(soleil.png) 0 0 no-repeat;
border:0px solid black;
z-index:10;
cursor:default;
}
.dd-demoo {
position:relative;
border:4px solid #666;
text-align:center;
color:#fff;
cursor:move;
height:500px;
width:500px;
}
#dd-demo-2 {
background:url(CartePheno.png) 0 0 no-repeat;
top:50px; left:220px;
border:0px solid black;
cursor:default;
}
</style>
</head>
<body bgcolor = "white">
<h1>Module de prévisions</h1>
<div class="exampleIntro">
<p>Faites glisser les éléments :</p>
</div>
<div id="dd-soleil-1" class="dd-demo">1<br /></div>
<div id="dd-soleil-1" class="dd-demo">2<br /></div>
<div id="dd-soleil-1" class="dd-demo">3<br /></div>
<div id="dd-demo-2" class="dd-demoo"></div>
<script type="text/javascript">
(function() {
var dd, dd2, clickRadius = 46, startPos,
Event=YAHOO.util.Event, Dom=YAHOO.util.Dom;
YAHOO.util.Event.onDOMReady(function() {
var el = Dom.get("dd-soleil-1");
startPos = Dom.getXY(el);
dd = new YAHOO.util.DD(el);
dd.clickValidator = function(e) {
var el = this.getEl();
var region = Dom.getRegion(el);
var r = clickRadius;
var x1 = Event.getPageX(e), y1 = Event.getPageY(e);
var x2 = Math.round((region.right+region.left)/2);
var y2 = Math.round((region.top+region.bottom)/2);
Event.preventDefault(e);
return ( ((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)) <= r*r );
};
dd.onInvalidDrop = function(e) {
new YAHOO.util.Motion(
this.id, {
points: {
to: startPos
}
},
0.3,
YAHOO.util.Easing.easeOut
).animate();
}
dd2 = new YAHOO.util.DDTarget("dd-demo-2");
});
})();
</script>
</body>
</html> |
