Demande d'aide pour Drag and Drop
Bonjour,
Je rencontre depuis plusieurs jours des difficultés sur l'utilisation du Drag and Drop et viens vers vous chercher de l'aide.
Mon objectif est de pouvoir drag une image qui se trouve sur un panel west et la drop sur le panel center ce qui au moment du drop ouvrira un nouveau panel suivant l'image qui à été déposée.
(par exemple si je drop une image d'oiseau, le panel oiseau s'ouvre, si je drop une image de cheval, le panel cheval s'ouvre).
Mes difficultés sont les suivantes (je suis débutant en formation) :
- Je ne sais pas reconnaître quelles est l'image que je drag and drop pour lui donner un event différent.
- Pour les graphicImage il n'est pas possible de mettre onDrop mais seulement onClick.
- Les panels ne s'ouvrent pas même avec un onClick.
Je vous joins mon code et espère qu'un développeur saura m'aider.
Merci.
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
| <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<link rel="icon" type="image/png" href="resources/images/logo_zoo.png" />
<meta charset="utf-8" />
<title>Découverte Animaux</title>
<style type="text/css">
/*.ui-layout, .ui-layout-doc, .ui-layout-unit, .ui-layout-wrap, .ui-layout-bd, .ui-layout-hd{
border: none;
}*/
.ui-picklist .ui-picklist-list{
height:280px;
width: 200px;
}
.ui-layout-center .ui-layout-unit-content {
background-color:transparent;
}
.ui-layout-west .ui-layout-unit-content {
overflow:visible;
}
.ui-fieldset-legend {
background:none !important;
border: none !important;
}
</style>
</h:head>
<h:body>
<p:layout fullPage="true" id="allLayout">
<p:layoutUnit position="north" size="200" resizable="false" closable="true" collapsible="true" >
<h:panelGrid id="monGrid1" columns="1" style="text-align: left;" >
<p:graphicImage value="resources/images/logo_transparent.png" />
<h:outputLabel value="Découverte des Animaux" style="font-size:15px;font-weight:bold;color:#000000;face:Calibri;"/>
</h:panelGrid>
</p:layoutUnit>
<p:layoutUnit position="west" size="290" header="OBJECTS" collapsible="true" resizable="false" style="font-size:12px" >
<h:form>
<h:panelGrid columns="3">
<p:inputText id="keyword" required="true" style="width: 195px"/>
<p:watermark for="keyword" value="..." />
<p:commandButton value="Search"/>
</h:panelGrid>
<p:fieldset legend="Oiseaux" toggleable="true" toggleSpeed="500" collapsed="true" >
<h:panelGrid columns="2" cellpadding="5">
<p:graphicImage id="pic1" value="resources/images/oiseau1.png" onclick="#{menu.setSelectedOption(menu.OPT2)}"/>
<p:graphicImage id="pic2" value="resources/images/oiseau2.png" onclick="#{menu.setSelectedOption(menu.OPT3)}"/>
<p:graphicImage id="pic3" value="resources/images/oiseau3.png" onclick="#{menu.setSelectedOption(menu.OPT4)}"/>
<p:draggable for="pic1;pic2;pic3" helper="clone" revert="true" />
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="Chats" toggleable="true" toggleSpeed="500" collapsed="true" >
<h:panelGrid columns="5" >
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="Chiens" toggleable="true" toggleSpeed="500" collapsed="true">
<h:panelGrid columns="2" cellpadding="5">
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="Chevaux" toggleable="true" toggleSpeed="500" collapsed="true">
<h:panelGrid columns="2" cellpadding="5">
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="Serpents" toggleable="true" toggleSpeed="500" collapsed="true">
<h:panelGrid columns="2" cellpadding="5">
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="Araignées" toggleable="true" toggleSpeed="500" collapsed="true">
<h:panelGrid columns="2" cellpadding="5">
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="Singes" toggleable="true" toggleSpeed="500" collapsed="true">
<h:panelGrid columns="2" cellpadding="5">
</h:panelGrid>
</p:fieldset>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" style="background: transparent ">
<h:form>
<h:panelGroup id="opt1Panel" layout="block" style="height:150px;width:300px;" rendered="#{menu.selectedOption == menu.OPT1}">
<p class="ui-widget-header" style="margin: 0; padding: 5px;">Drop here</p>
<p:droppable onDrop="handleDrop" />
</h:panelGroup>
<p:panel id="opt2Panel" rendered="#{menu.selectedOption == menu.OPT2}">
<p:outputLabel value="Ceci est le panel 2." />
</p:panel>
<p:panel id="opt3Panel" rendered="#{menu.selectedOption == menu.OPT3}">
<p:outputLabel value="Ceci est le panel 3." />
</p:panel>
<p:panel id="opt4Panel" rendered="#{menu.selectedOption == menu.OPT4}">
<p:outputLabel value="Ceci est le panel 4." />
</p:panel>
</h:form>
</p:layoutUnit>
</p:layout>
<script>
function handleDrop(event, ui) {
$(event.target).addClass("ui-state-highlight").find("p").html("Dropped!");
}
</script>
</h:body>
</html> |
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
| @ManagedBean(name="menu")
@SessionScoped
public class Menu {
private final int OPT1 = 1;
private final int OPT2 = 2;
private final int OPT3 = 3;
private final int OPT4 = 4;
private int selectedOption;
public Menu() {
selectedOption = OPT1;
}
public int getSelectedOption() {
return selectedOption;
}
public void setSelectedOption(int selectedOption) {
this.selectedOption = selectedOption;
}
public int getOPT1() {
return OPT1;
}
public int getOPT2() {
return OPT2;
}
public int getOPT3() {
return OPT3;
}
public int getOPT4(){
return OPT4;
}
} |
