Javascript 使用匿名坐标数组移动多个Dom元素

我正在尝试使用一个新坐标数组移动一些div

该数组由人脸检测库（face api.js）动态创建。这将输出具有x/y坐标的边界框

使用一个div将第一个坐标绑定到Dom元素没有问题。 但在多重坐标下，我很难找到正确的方法

阵列不断变化，多个div不跟随检测。 我尝试了最近邻算法的实现

我尝试对anon坐标进行排序，然后对div坐标进行排序，并循环将anon坐标应用于每个div

以下是一帧的代码示例：

...
let processResult = [{ x: 123}, {x: 456}, {x:789}]
let availableDiv = [xa, xb, xc , xd , xe, xf]

processResult.sort( (a, b) => parseInt(a.detection.box.x) - parseInt(b.detection.box.x));
availableDiv.sort( (a, b) => {
  parseInt(a.selector.getBoundingClientRect().x) - parseInt(b.selector.getBoundingClientRect().x)
});

processResult.forEach( (item, resultsIndex) => {

if (availableDiv.length > 0 && processResult.length > 0 ) {

  closest = availableDiv[0];
  function DistSquared(pt1, pt2) {
    var diffX = parseInt(pt1.left) - parseInt(pt2.left);
    var diffY = parseInt(pt1.height) - parseInt(pt1.height);
    return (diffX*diffX+diffY*diffY);
  }

  let shortestDistance = DistSquared(myPosition, availableFuseau[0]);

  for (let avaIndex = 0; avaIndex < availableDiv.length; avaIndex++) {
     var d = DistSquared(myPosition, availableDiv[avaIndex].selector.style);
     if (d < shortestDistance) {
        closest = availableDiv[avaIndex];
        closest.index = avaIndex
        shortestDistance = d;
     }
}

availableDiv.splice(closest.index, 1)

// change div coordinate
...

。。。
让processResult=[{x:123}，{x:456}，{x:789}]
let availableDiv=[xa，xb，xc，xd，xe，xf]
processResult.sort（（a，b）=>parseInt（a.detection.box.x）-parseInt（b.detection.box.x））；
可用虚拟排序（（a，b）=>{
parseInt（a.selector.getBoundingClientRect（）.x）-parseInt（b.selector.getBoundingClientRect（）.x）
});
processResult.forEach（（项目，结果索引）=>{
if（availableDiv.length>0&&processResult.length>0）{
最近的=可用的EV[0]；
函数DistSquared（pt1，pt2）{
var diffX=parseInt（pt1.left）-parseInt（pt2.left）；
var diffY=parseInt（pt1.height）-parseInt（pt1.height）；
返回（diffX*diffX+diffY*diffY）；
}
设最短距离=距离平方（myPosition，availableFuseau[0]）；
for（设avaIndex=0；avaIndex

主要目标是在两个帧/坐标更改之间进行平滑过渡，最重要的是在每帧中选择正确的Div元素

有人能帮我吗