我尝试了许多不同的教程和线程来实现我试图做的事情，但是没有帮助。这是我所拥有的以及我要实现的目标：
<div id="column1" class="columns">
<div id="5" class="dragbox"> </div>
<div id="3" class="dragbox"> </div>
<div id="1" class="dragbox"> </div>
</div>
<div id="column2" class="columns">
<div id="2" class="dragbox"> </div>
<div id="4" class="dragbox"> </div>
</div>
The sort order is stored in an array:
order1 = [column1:{3,5,1,4}];
order2 = [column2:{2}];
Using the sort order arrays, I would like to achieve the following result:
<div id="column1" class="columns">
<div id="3" class="dragbox"> </div>
<div id="5" class="dragbox"> </div>
<div id="1" class="dragbox"> </div>
<div id="4" class="dragbox"> </div>
</div>
<div id="column2" class="columns">
<div id="2" class="dragbox"> </div>
</div>
答案 0 :(得分：0)
您是否可以擦除div的内容并使用javascript从头开始重新创建它？
我认为最简单的方法是使用空div（column1和column2），并且每次数组中有新数据时，目标都是擦除旧div的内容并用数组内容重新创建。
例如，您的基本HTML就是这样
<body>
<div id="column1" class="columns">
</div>
<div id="column2" class="columns">
</div>
</body>
这是您的js（使用jQuery，因为您将其发布为标签）：
var column1 = [3,5,1,4];
var htmlContent = '';
for(var i = 0; i < column1.length; i++){
htmlContent += '<div id="'+column1[i]+'" class="dragbox"> </div>';
}
$("#column1").html(htmlContent );
并对column2做相同的操作。
您还可以在此之前进行循环
for(var i = 0; i < column1.length; i++){
htmlContent += '<div id="'+column1[i]+'" class="dragbox"> </div>';
}
如果要填充的列很多。这样，您可以动态创建列的HTML。
仅当您不需要列的div内容时，此解决方案才是正确的，因为$("#column1").html(htmlContent);
将"#column1"的实际内容替换为htmlContent