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

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(...){
        ...
    }
}