Как открыть панель с перетаскиванием изображения?

Question

Я хотел бы открыть новую панель в центре LayoutUnit, перетащив изображение с запада LayoutUnit в центр LayoutUnit.

Проблемы, которые я не могу решить, являются:

• У меня есть несколько изображений, и я хотел бы, чтобы дифференцировать панель, которая собирается быть открытым в соответствии с изображением, который упал.
• Элемент, который я бросаю, является графическим изображением, и для события есть только 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

Вы должны гнездиться в р: АЯКС в ваш р: сбрасываемой в целевой панели.

Чтобы идентифицировать данное изображение, это немного сложно. Если у вас есть только несколько, исправить изображения, вы можете привязать их к компоненту меню, а затем сравнить их clientId (см. Пример ниже).

Пример изображения:

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

Droppable целевая панель:

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

Меню фасоли модификации:

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