どのように位置を動的に変更し、その位置を記録するJavaScript PHP

Question

私はページの向こう側に14の列を含むビルドするプロジェクトを持っています、それらの列はドラッグアンドドロップを使用してpdfファイルを最初の列に追加すると、すべての列の行が表示され、ユーザーは同じファイルを同じ行に前に進めることができることを示します。別の新しいpdfファイルがドラッグされている場合は、前のpdfファイルの下に移動します。これは、すべての列にファイルがたくさんあることを意味します。列1には3つのファイルがあります。列7には10が入っている可能性があります。現時点ではdivを使用してDropboxを実行していますが、 1から10,000ファイル、それは私が別の位置で10,000 divを作成しなければならないということですか？私は、これをよりダイナミックにするために必要とするので、これを行うためのより良い方法が必要であると確信しています。そして、それが動的なデータになった場合、どのようにデータ情報（ファイルの場所の位置）を保存するので、次回に私がページにアクセスするときに、情報は同じ位置に割り当てられますか？ （私はそれがPHPが必要になると思うが、私はまだその部分に得る）didnt。

このコードにはすべてのdivが含まれているわけではありませんが、各列には現在4個の列が含まれていますが、その数ははるかに多いので、このDropboxは動的である必要があります。私は、CSSもJavaScriptファイルも含めていません。私はそれが無関係であると考えました。あなたの誰かがそれを見たいと思ったら私はそれを掲示するでしょう。私はあなたがjQueryのUIの後にあると思います

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

。これにより、プロセス全体が大幅に簡略化され、http://jqueryui.com/droppable/またはhttp://jqueryui.com/sortable/に表示されます。私はjqueryを好きに使うのではなく、動きを作った。あなたがそれを後悔するとは思わない。