Html 如何通过拖放图像打开面板？

我想通过将图像从west LayoutUnit拖放到Center LayoutUnit，在Center LayoutUnit中打开一个新面板

我无法解决的问题是：

• 我有几个图像，我想区分的面板，这将是根据图像被放下打开
• 我放置的元素是一个graphicImage，事件只有onclick，ondrop是不可能的
• 即使我使用onclick，面板也不会改变

请找出下面的代码，有人能帮我吗

<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>

---

您应该在目标面板中的p:dropable中嵌套一个p:ajax

识别给定的图像有点棘手。如果您只有几个修复图像，您可以将它们绑定到菜单bean，然后比较它们的clientId（参见下面的示例）

图像示例：

<p:graphicImage id="pic1" value="pathToYourImage" binding="#{menu.img1}"/>

如果您有不同数量的图像，那么绑定不是您的解决方案。在这种情况下，您应该尝试从ViewRoot中查找给定组件。 这可能会有帮助：

菜单回调：

public void actionImageDropped(DragDropEvent event){
    String dragId = event.getDragId();
    if(img1.getClientId().equals(dragId)){
        selectedOption = OPT1
    }else if(...){
        ...
    }
}

---

非常感谢Plutoz的帮助，它工作得非常好。我只需在getClientId中添加参数FacesContext.getCurrentInstance（）。

private GraphicImage img1;

public GraphicImage getImg1() {
    return img1;
}
public void setImg1(GraphicImage img1) {
    this.img1 = img1;
}

public void actionImageDropped(DragDropEvent event){
    String dragId = event.getDragId();
    if(img1.getClientId().equals(dragId)){
        selectedOption = OPT1
    }else if(...){
        ...
    }
}