在预定数量的盒子中计算上传图像的顺序

Question

我需要一些帮助/指导来计算上载图像的顺序。

我有4个可用的框（图中没有2个框），用户可以在每个框中上传图像。

我知道当呈现为html时的框顺序（索引）。

1. 用户不需要按顺序上传图像，因此他可以将图像上传到box2并将图像上传到box4

   • 如此the box2 -order 0; box4 - order 2
2. 这些框还可以具有图像初始名称（如果有更新）。用户可以删除图片，以后再替换图片或不替换图片

例如：

所有4个方框中都有图像。用户从box1，box2和box 3中删除了图像，所以

box4- order 0

稍后用户在box3中添加/替换图像，因此：

box3 -oder0, box4 -order1

我需要一个纯JavaScript的入门思路/代码。

Answer 1

我认为空框必须始终位于行的末尾并按其索引排序。

完整的方框必须在最前面，并根据上一次用户交互进行排序。

以下几行计算每个框的顺序。您需要设置“ isEmpty”和“ updated”值。

“更新”值是上一次交互的日期，如果该框为空，则必须为0。

var order = 0;
var emptyBoxes = [];
var fullBoxes = [];
var boxes = [
  {index:0, order:0, isEmpty:true, updated:0},
  {index:1, order:0, isEmpty:true, updated:0},
  {index:2, order:0, isEmpty:false, updated:1519211810362},
  {index:3, order:0, isEmpty:false, updated:1519211809934}
];

boxes.forEach (function(box){  
  if(box.isEmpty){
    emptyBoxes.push(box.index);
  }else{
    fullBoxes.push({index:box.index,updated:box.updated});     
  }
});

fullBoxes.sort(function(a,b){
  return a.updated - b.updated;
});

fullBoxes.forEach (function(box){
  for (i = 0; i < 4; i++){
    if(boxes[i].index == box.index){
      boxes[i].order = order;
      order++;
    } 
  }
});

emptyBoxes.forEach (function(boxIndex){
  for (i = 0; i < 4; i++){
    if(boxes[i].index == boxIndex){
      boxes[i].order = order;
      order++;
    } 
  }
});


boxes.forEach (function(box){
  console.log("the order for box #"+box.index+" is "+box.order); 
});

Answer 2

您可以将当前时间戳与图像一起发送。当用户单击上传图像时，将更新图像和时间戳，然后在后端，您可以轻松地整理出用户上传图像的顺序。