如何动态更改位置并记录该位置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，但采取行动，我认为你永远不会后悔（如果你不使用它）。