title: Adding droppable and ajax behavior to outputPanel JSF
body: <p>I'm creating a board where I can drop object and want to do it dynamically.</p>
  
  <p>What I want to have is something like this:</p>
  
  <pre><code>&lt;p:outputPanel id="ASlot1" styleClass="slot"&gt;  
      &lt;p:droppable tolerance="fit" activeStyleClass="slotActive" scope="PC1" datasource="availableComputers"&gt;  
          &lt;p:ajax listener="#{sampleUI.onDrop}" update="selectedComputers" /&gt;  
      &lt;/p:droppable&gt;  
  &lt;/p:outputPanel&gt; 
  </code></pre>
  
  <p>Backing Bean:</p>
  
  <pre><code>HtmlPanelGroup panel;
  OutputPanel table [][] = new OutputPanel[x][y];
  Panel p = new Panel();
  
  for (int i = 0; i &lt; x; i++) {
      for (int j = 0; j &lt; y; j++) {
          table[i][j] = new OutputPanel();
          table[i][j].setId(tableConcat+i+j);
          table[i][j].setStyle(" background:#444444; width:100px; height:100px; display:block; boarder-style: solid;");
          grid.getChildren().add(table[i][j]);
      }
  }
  
  panel.getChildren().add(grid);
  
  p.setId("pnel");
  panel.getChildren().add(p);
  
  RequestContext requestContext = RequestContext.getCurrentInstance();
  requestContext.update("panelForm");
  </code></pre>
  
  <p>JSF Page:</p>
  
  <pre><code>&lt;h:form id="panelForm"&gt;
      &lt;h:panelGroup id="panelIt" binding="#{pane.panel}"/&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <p>What will I add to my backing bean?</p>
  
  <p>EDIT:</p>
  
  <p>So I added this</p>
  
  <pre><code> Droppable d = new Droppable();
  
   d.setScope("PCName");
   d.setDatasource("availableComputers");
   d.setActiveStyleClass("slotActive");
   d.setOnDrop("handleDrop");
   d.setTolerance("fit");
  </code></pre>
  
  <p>Then put each one in the dynamically created outputpanel</p>
  
  <pre><code>d.getChildren().add(table[i][j]);
  </code></pre>
  
  <p>It does not seem to work.</p>