javascript - 如何动态更改位置并记录该位置 javascript PHP

Question

我有一个要构建的元素，该元素包含整个页面的 14 列，这些列将具有保管箱，用户可以在其中拖放 pdf 文件，一旦使用将 pdf 文件拖放到第一列，所有列中的一行将出现表明用户可以继续在同一行中向前删除相同的文件。如果拖动另一个新的 pdf 文件，它将位于前一个文件的下方。这意味着所有列中都会有很多文件，第 1 列可能有 3 个文件，第 7 列可能有 10 个。目前我正在使用 div 做保管箱，但我不认为这是非常动态的，因为我可以在两者之间1 到 10,000 个文件，这是否意味着我必须创建 10,000 个不同位置的 div？我相信必须有更好的方法来做到这一点，因为我需要它更有活力。如果它变成动态数据，我将如何保存数据信息(文件位置的位置)以便下次访问该页面时信息将分配在相同的位置？ (我相信这需要 php，但我还没有接触到那部分)。

此代码不包含所有 div，它包含 4 列，目前每列都有 1 个保管箱，但这个数字会高得多，这就是为什么我认为这个保管箱应该是动态的。我没有包括 css 和 javascript 文件。正如我认为它无关紧要。如果有人想看，我会发布。

HTML

<div class="columnContent">
            <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="columnContent">
            <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="columnContent" >
            <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="columnContent">
            <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 UI。这将更好地简化整个过程，可以在http://jqueryui.com/droppable/看到。或 http://jqueryui.com/sortable/ .我以前不喜欢 jquery，但现在开始行动，我认为您永远不会后悔(如果您还没有使用它的话)。