Je ne comprends pas bien drag drop scriptaculous

**nono95** · 11/05/2009, 15h53

Voici mon code :

Code :

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="src/scriptaculous.js?load=effects,dragdrop"></script>
 
<style type="text/css">
 
div#source {
width: 100px;
height: 100px;
cursor: move;
background: #9fcfba;
}
 
</style>
 
</head>
<body>
<div id="source" >
Draggable
</div>
<div id="source2" style="height: 100px; width: 100px; background-color: gray;">
Draggable2
</div>
<script type="text/javascript">
new Draggable("source", {
revert:"failure"
});
 
new Draggable("source2", {
revert:"true"
});
</script>
 
<br/>
 
<div id="target" style="height: 100px; width: 100px; background-color: green;">
Good Target 1
</div>
 
<div id="target2" style="height: 100px; width: 100px; background-color: green;">
Good Target 2
</div>
 
<script type="text/javascript">
 
Droppables.add('target', {
accept: 'source',
// containment:'source',
onDrop:function(element){ Test() }
});
 
Droppables.add('target2', {
containment: 'source2',
onDrop:function(element){ Test() }
});
 
function Test(){
alert('OK');
}
 
</script>
 
<br/>
 
</body>
</html>

accept devrait me permettre d'accepter dans le droppable les div de classe "source"; containment devrait me permettre d'accepter dans le droppable le div dont l'ID est "source2".
Mais cela ne passe pas.
Quand j'enlève ces options cela passe.
Si quelqu'un veut bien prendre le temps de m'expliquer le pb cela me rendrait bien service.

**RomainVALERI** · 11/05/2009, 15h59

D'abord bienvenue à toi nono ^^
A propos de la forme de ton message : jette quand même un oeil ici >>> règles du forum

(notamment : utilisation des balises CODE) >>> tu auras plus de lecteurs potentiels de ton problème... ^^

**nono95** · 11/05/2009, 16h09

Désolé, c'était mon premier message ==> je ferai mieux à l'avenir, c'est promis.

**RomainVALERI** · 11/05/2009, 16h20

Une idée : est-ce que tes div 'source' et 'source2' ne devraient pas avoir comme propriété class="source" pour que ton param

Code javascript :

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

accept: 'source'

les considèrent comme des candidats acceptables ?

(>>> page Droppables)

**nono95** · 11/05/2009, 16h39

oui, effectivement cela fonctionne avec le paramètre accept.
Je pensais qu'il n'était pas nécessaire de faire référence à la class "source"
dans la balise DIV puisque le CSS était

Code :

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

1
2
3
4
5
6
div#source {
    width: 100px;
    height: 100px;
    cursor: move;
    background: #9fcfba;
    }

Cela passe donc pour la mise en forme, mais pas pour le paramètre accept de droppable.

Par contre le paramètre containment lui ne fonctionne pas dans mon code, or il attend bien un ID et pas une classe si j'ai bien lu la doc de scriptaculous.

Merci en tout cas pour ce début de réponse.

Je ne comprends pas bien drag drop scriptaculous

JavaScript

Discussions similaires

Partager

Partager