Question

我有一个要构建的项目，其中包含整个页面上的14列，这些列将具有dropbox，用户可以拖放pdf文件，一旦使用将pdf文件拖放到第一列，所有列中的一行将显示用户可以继续在同一行中向前放置相同的文件。如果拖动另一个新的pdf文件，它将在前一个下面。这意味着所有列中都会有很多文件，第1列可能有3个文件列7可能有10个。目前我正在使用div进行dropbox，但我不认为这是非常动态的，因为我可以有1到10,000个文件，这是否意味着我必须创建10,000个不同位置的div？我相信必须有一个更好的方法来做到这一点，因为我需要这个更有活力。如果它变成动态数据，我如何保存数据信息（文件位置的位置），以便下次访问页面时，信息将被分配到相同的位置？（我相信这需要php，但我还没达到那个部分。）

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

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 UI。这样可以更好地简化整个过程，可以在http://jqueryui.com/droppable/或http://jqueryui.com/sortable/查看。我没有用来喜欢jquery但是我采取行动，我认为你不会后悔（如果你还没有使用它）。

如何动态改变位置并记录javascript PHP的位置

1 个答案: