title: Struts2 TreeView table drag and drop
body: <p>I have JSP page that presents a table treeview for folders. These folders are JSON <code>&lt;s:iterator ... &gt;</code>
  Folders contain plan.pdf which are also <code>&lt;s:iterator</code> </p>
  
  <p><strong>Example</strong>:</p>
  
  <pre><code>Root
  Folder1
   plan1.pdf
   plan2.pdf
  subFolder1.1
   plan1.pdf
  subFolder1.2
   plan1.pdf
  Folder2
   plan1.pdf
  </code></pre>
  
  <p>Now I drag Folder1.2 and paste to Folder1.1 .. the treeview will become: </p>
  
  <pre><code> - Root
   - Folder1
   -  plan1.pdf
   -  plan2.pdf
   - subFolder1.1
   -  plan1.pdf
   - subsubFolder1.1.2
   -  plan1.pdf
  </code></pre>
  
  <p>Any suggestion?</p>
  
  <p>Also do you have any idea how to show treeview as this</p>
  
  <pre><code>- Root
   - |--- Folder 1
   - |  |--- subFolder 1.1
   - |  |--- subFolder 1.2
   - |--- Folder 2
   - |  |--- subFolder 2.1
   - |--- Folder 3
   - |  |--- subFolder 3.1
  </code></pre>
  
  <p>Code:</p>
  
  <p>Class PlanFolder</p>
  
  <pre><code>@Entity
  @Table(name="plan_folder")
  public class PlanFolder extends EntiteSynchroniseeAbstract implements Serializable {
  @Id
  @GeneratedValue(strategy=GenerationType.AUTO)
  @Column(name="plan_folder_id")
  private int planFolderId;
  
  //bi-directional many-to-one association to Projet
  @ManyToOne
  @JoinColumn(name="project_id")
  private Projet projet;
  
  //bi-directional One To One association to PlanFolder
  @OneToOne
  @JoinColumn(nullable=true, name="root_id")
  private PlanFolder root;
  
  @Column(name="plan_folder_name")
  private String planFolderName;
  
  //bi-directional many-to-one association to Plan
  @OneToMany(mappedBy="folder")
  private List&lt;Plan&gt; plans;
  
  //setters and getters
  </code></pre>
  
  <p>DAO Interface</p>
  
  <pre><code>public interface DaoPlanFolder extends Dao&lt;PlanFolder&gt; {
  
  public List&lt;PlanFolder&gt; getPlanFolders(int projetId);
  public void deleteFolder(int planfolderId);
  public PlanFolder getRacine (int projetId);
  
  public List&lt;PlanFolder&gt; verifiePlanFolder (int projetId, int planId, String planFolderName);
  
  public void  moveFolder (int planfolderId , int newRootId );
  public void renameFolder (int planfolderId , String newName);
  public PlanFolder createFolder(String name, int projetId, int rootId , int planId);
  public Fichier telechargeMiniature(int projetId);
  public List&lt;Plan&gt; getPlans(int projetId, int folderId);
  public Fichier chargerFichierCompressed(Fichier archive , int projetId, Utilisateur utilisateur, File source);
  public void deleteByIdPlanFolder (int planFolderId)  ;
  public PlanFolder createRacine(String name, int projetId);
  }
  </code></pre>
  
  <p>Action</p>
  
  <pre><code>    public String movePlanFolder() {
      DaoPlanFolder daoPlanFolder = DaoFactory.getDaoPlanFolder();    
      daoPlanFolder.moveFolder(this.planFolderId, this.rootId);
      daoPlanFolder.close();
      return SUCCESS;
      }
  </code></pre>
  
  <p><strong>JSP</strong></p>
  
  <pre><code> &lt;s:if test="planFolders.size &gt; 0"&gt;
      &lt;table id="table_planFolders" class="table_datas"&gt;
          &lt;tr&gt;
  
              &lt;th class="largeur_5"&gt;&lt;/th&gt;
              &lt;th class="largeur_5"&gt;&lt;/th&gt;
              &lt;th class="largeur_25"&gt;&lt;/th&gt;                            
              &lt;th class="largeur_25"&gt;&lt;/th&gt;
  
              &lt;th&gt;&lt;s:text name="plans.th.nom"/&gt;&lt;/th&gt;
              &lt;th class="largeur_100"&gt;&lt;s:text name="plans.th.indice"/&gt;&lt;/th&gt;
              &lt;th class="largeur_100"&gt;&lt;s:text name="plans.th.echelle"/&gt;&lt;/th&gt;
              &lt;th class="largeur_160"&gt;&lt;/th&gt;
  
                      &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="8"&gt;
                  &lt;div class="separateur"&gt;&lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;       
          &lt;s:iterator value="planFolders" status="status"&gt;
              &lt;tr id="${planFolderId}" class="${status.even ? 'tr_paire' : ''}"&gt;
  
                  &lt;td onclick="&lt;s:set var="rootId" value="rootId"/&gt;"&gt;
  
                      &lt;s:if test="rootId != 0"&gt;   
                      &lt;ul&gt;
                          &lt;li&gt;  
                              &lt;c:set var="plus" value="${pageContext.servletContext.contextPath}/css/elements/plus.png" scope="request"/&gt;
                              &lt;s:submit type="image" src="%{#request.plus}"  onclick="createPlanFolder('%{planFolderName}','%{planFolderId}',0)"/&gt;
                           &lt;/li&gt;      
  
                          &lt;li&gt;  
                              &lt;c:set var="main" value="${pageContext.servletContext.contextPath}/css/elements/main.png" scope="request"/&gt;
                              &lt;s:submit type="image" src="%{#request.main}" onclick="deplacePlanFolder('%{planFolderId}','%{rootId}')"/&gt;
                           &lt;/li&gt;      
                      &lt;/ul&gt;
                              &lt;/s:if&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;table&gt;&lt;tr&gt;&lt;td&gt;
                              &lt;s:if test="rootId != 0"&gt;
                                  &lt;s:if test="'%{planFolders[counter].rootId}'!='%{racineId}'"&gt;
                                      &lt;script type="text/javascript"&gt;document.write(traitdebase);&lt;/script&gt;
                                  &lt;/s:if&gt;                                     
                              &lt;/s:if&gt;&lt;/td&gt;    &lt;td&gt;
                              &lt;input type="image" src="&lt;%=request.getContextPath()%&gt;/css/elements/repertoire.png" height="42" width="42"&gt;
                      &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
                  &lt;/td&gt;
  
                  &lt;td&gt;            
                      &lt;h2&gt;${planFolderName}&lt;/h2&gt;
                  &lt;/td&gt;
                  &lt;td&gt;        &lt;/td&gt;
  
                  &lt;td&gt;        &lt;/td&gt;
                  &lt;td&gt;    &lt;/td&gt;
                  &lt;td&gt;    &lt;/td&gt;
  
                  &lt;td&gt;
                      &lt;s:if test="rootId != 0"&gt;
                          &lt;ul&gt;                                
                          &lt;li class="lien" onclick="renamePlanFolder(${planFolderId})"&gt;&lt;s:text name="planFolder.lien.RenameFolder"/&gt;&lt;/li&gt;
                              &lt;li class="lien" onclick="deletePlanFolder(${planFolderId})"&gt;&lt;s:text name="planFolder.lien.DeleteFolder"/&gt;&lt;/li&gt;
                          &lt;/ul&gt;   
                      &lt;/s:if&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;   
              &lt;tr&gt;        
                  &lt;s:if test="plans.size &gt; 0"&gt;
                      &lt;tr&gt;
                          &lt;td colspan="8"&gt;
                              &lt;div class="separateur"&gt;&lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;s:iterator value="plans" status="status"&gt;
                          &lt;tr class="${status.even ? 'tr_paire' : ''}"&gt;           
  
                              &lt;td&gt;                        
                                  &lt;ul&gt;
                                      &lt;li&gt;  
  
                                          &lt;c:set var="plus" value="${pageContext.servletContext.contextPath}/css/elements/plus.png" scope="request"/&gt;
                                          &lt;s:submit type="image" src="%{#request.plus}"  onclick="createPlanFolder('%{planNom}','%{planFolderId}','%{planId}')"/&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;  
                                          &lt;c:set var="main" value="${pageContext.servletContext.contextPath}/css/elements/main.png" scope="request"/&gt;
                                          &lt;s:submit type="image" src="%{#request.main}" /&gt;
                                      &lt;/li&gt;           
                                  &lt;/ul&gt;   
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;s:if test="'%{planFolders[counter].rootId}'!='%{racineId}'"&gt;
                                      &lt;script type="text/javascript"&gt;document.write(traitdeplan);&lt;/script&gt;
                                  &lt;/s:if&gt;
                              &lt;/td&gt;                                               
  
                              &lt;td&gt;&lt;/td&gt;   
                              &lt;td&gt;
                                  &lt;s:if test="indiceActuel.indiceStatut == 2"&gt;
                                      &lt;img class="pointeur" src="TelechargeMiniature.bp?indiceId=${indiceActuel.indiceId}" align="middle" onclick="affichePlan(${planId})" /&gt;
                                  &lt;/s:if&gt;
                                  &lt;s:elseif test="indiceActuel.indiceStatut == 3"&gt;
                                      &lt;s:text name="plans.message.error"/&gt;
                                  &lt;/s:elseif&gt;
                                  &lt;s:else&gt;
                                      &lt;s:text name="plans.message.enCours"/&gt;
                                  &lt;/s:else&gt;
                              &lt;/td&gt;
                              &lt;td&gt;&lt;b&gt;${planNom}&lt;/b&gt;&lt;/td&gt;
                              &lt;td&gt;${indiceActuel.indiceNumero}&lt;/td&gt;
                              &lt;td&gt;&lt;s:text name="enum.echelle.%{indiceActuel.echelleEnum}" /&gt;&lt;/td&gt;
  
                              &lt;td&gt;
                                  &lt;ul&gt;
                                      &lt;li class="lien" onclick="augmenterIndice(${planId})" &gt;&lt;s:text name="plans.lien.nouvelIndice"/&gt;&lt;/li&gt;
                                      &lt;li class="lien" onclick="modifierPlan(${planId})"&gt;&lt;s:text name="plans.lien.modifierPlan"/&gt;&lt;/li&gt;
                                      &lt;li class="lien" onclick="supprimerIndice(${planId})"&gt;&lt;s:text name="plans.lien.supprimerIndice"/&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;       
                      &lt;/s:iterator&gt;
                  &lt;/s:if&gt;
              &lt;/tr &gt;&lt;script type="text/javascript"&gt;counter = counter+1;&lt;/script&gt;
          &lt;/s:iterator&gt;       
  
  
  
      &lt;/table&gt;
  &lt;/s:if&gt;
  </code></pre>
  
  <p>Our client had a scenario in mind I put it as images - he wants by clicking on the hand the hand turn into orange and that means this is the folder which I want to move <a href="http://i.stack.imgur.com/Xrn26.png" rel="nofollow">selection</a>.</p>
  
  <p>After that by clicking on another folder which becomes blue selection that means this new root (destination) <a href="http://i.stack.imgur.com/Ipr4N.png" rel="nofollow">output</a>.</p>
  
  <p>I want to do it more complicated as a drag and drop rows.</p>