如何動態更改位置並記錄該位置javascript PHP

Question

我有一個項目要在頁面中包含14列，這些列將具有允許用戶拖放pdf文件的dropbox，一旦使用拖放操作pdf文件到第一列，所有列的一行將出現，表明用戶可以繼續在同一行中向前拖放同一文件。如果另一個新的pdf文件被拖拽，它會在前一個下。這意味着在所有列中將會有很多文件，第1列可能有3個文件第7列可能有10個。此刻，我正在使用div執行dropbox，但我不認爲這是非常動態的，因爲我可以在1到10,000個文件，這是否意味着我將不得不創建10,000個不同位置的div？我相信必須有更好的方式來做到這一點，因爲我需要這樣做更具活力。如果它變成動態數據，我將如何保存數據信息（文件位置的位置），以便下次訪問頁面時將信息分配在同一位置？ （我相信這將需要PHP，但我沒有得到那部分）。

這個代碼不包含所有div，它包含4列，每列列有目前Dropbox的1裏面，但這個數字將高得多這就是爲什麼我認爲這Dropbox的應該是動態的。我沒有包含這個CSS文件。正如我認爲它無關緊要。如果你們中有人想看到它，我會發布它。

HTML

<div class="collumnContent"> 
      <p>Customer's order</p> 
      <div class="dropBox" ondrop="drag_drop(event)" 
      ondragover="allowDrop(event)" ondragstart= 
      "dragInfo(event)" id="dp1" draggable="true"> 
       <p id="para1">Drag file here</p> 
       <div class="leftAlign"> 
       <img src="pdf.jpg" id="pdfImg" style="visibility: hidden"> 
       <p1 id="pdfInfo"></p1><br> 
       </div> 
       <input id="txt1" placeholder="Customer's code" style="visibility: 
       hidden"><br> 
       <input id="txt2" placeholder="Customer's size" style="visibility: 
       hidden"><br> 
       <input id="txt3" placeholder="Customer's DD" style="visibility: 
       hidden"><br> 
       <button id="btn" style="visibility: hidden">Save</button> 
      </div> 
     </div> 

     <div class="collumnContent"> 
      <p>Planned</p> 
      <div class="dropBox" ondrop="drop(event)"ondragover="allowDrop(event)" > 
     ####(I think these boxes should be dynamic or I 
      will have to create 100s of them)##### 
       <p ondragstart="dragInfo(event)" draggable="true">Drag file here</p> 
      </div> 
     </div> 

     <div class="collumnContent" > 
      <p>Checked</p> 
      <div class="dropBox" ondrop="drop(event)"ondragover="allowDrop(event)" 
      style="visibility: hidden"> ###(I think these 
     boxes should be dynamic or I will have to create 100s of them)### 
       <p ondragstart="dragInfo(event)" draggable="true">Drag file here</p> 
      </div> 
     </div> 

     <div class="collumnContent"> 
      <p>Coil @ I.S</p> 
      <div class="dropBox" ondrop="drop(event)" 
ondragover="allowDrop(event)" 
     style="visibility: hidden"> ####(I think these boxes should 
     be dynamic or I will have to create 100s of them)#### 
       <p ondragstart="dragInfo(event)" draggable="true">Drag file 
here</p> 
      </div> 
     </div> 

Answer 1

我認爲你是jQuery用戶界面之後。這將使整個過程簡化得更好，可以在http://jqueryui.com/droppable/或http://jqueryui.com/sortable/處看到。我不喜歡jquery，但採取行動，我認爲你永遠不會後悔（如果你不使用它）。