How to open a Panel with Drag and Drop of an image? - html

Question

I would like to open a new Panel in the Center LayoutUnit by drag and drop an image from the west LayoutUnit to the Center LayoutUnit.
The problems that I can't solve are:
I have several images and I would like to differentiate the panel that is going to be open according to the image that is dropped.
The element that I drop is a graphicImage and there is only onclick for the event, ondrop is not possible.
The panels don't change even if I use the onclick.
Please find below the code, could someone help me please?
<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>
#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;
}
}

Answer 1

You should nest a p:ajax into your p:droppable in the target panel.
To identify the given image is a bit tricky. If you have only a few, fix images, you can bind them to Menu bean maually and later compare their clientId (see example below).
An image example:
<p:graphicImage id="pic1" value="pathToYourImage" binding="#{menu.img1}"/>
The droppable target panel:
<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>
<p:ajax listener="#{menu.actionImageDropped}" update="#form" partialSubmit="true" process="#this" />
</p:droppable>
</h:panelGroup>
Menu bean modifications:
private GraphicImage img1;
public GraphicImage getImg1() {
return img1;
}
public void setImg1(GraphicImage img1) {
this.img1 = img1;
}
If you have a various number of images, the binding is not a solution for you. In that case, you should try to find the given component from the ViewRoot.
This could be helpful: Link
Menu callback:
public void actionImageDropped(DragDropEvent event){
String dragId = event.getDragId();
if(img1.getClientId().equals(dragId)){
selectedOption = OPT1
}else if(...){
...
}
}