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

Question

我想通过将图像从西 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>

@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

您应该将 p:ajax 嵌套到目标面板中的 p:droppable 中。

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

图片示例：

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

可放置的目标面板：

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

菜单 bean 修改：

private GraphicImage img1;

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

如果您有不同数量的图像，则绑定不适合您。在这种情况下，您应该尝试从 ViewRoot 中找到给定的组件。 这可能会有所帮助：Link

菜单回调：

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