Javascript 在表格中获得位置

我有这个。我可以拖动到任何我想拖动的地方。有没有办法创建另一个表，我可以得到每个图像的位置（只有位置）。例如，如你所见，有位置1到24。在位置12，我有红色图像。在位置24，我有黑色图像。我要做的是，如果我从位置12拖动带有数字a的图像到位置，我想把这个值放在插槽11中，然后当我拖动时，它将创建一个新的表，如，并将写入（11，a）。结论，11将是我传输的位置和图像。会发生吗？我目前正在尝试，没有结果。提前谢谢

---

已编辑：如果拖动一个图像到某个位置，比如说5，下一次拖动时，您将使用您要访问的同一个图像（1，a），然后您不能再拖动该图像-（如果可能的话）

当您将数据与UI分离时，它会变得更容易，这意味着在拖动图像的同时，数据集正在后台处理

在下面的小片段中，我将尝试对您的案例进行分析。如果可以拖动或不拖动，项目将保持跟踪

项目

现在只填充了4个图像，但您可以在其中添加任意数量的图像-它们可以作为单独的项目处理唯一需要注意的是：项目的

id

s必须是唯一的。

const项=[{
id:0，
dataid：“a”，
类型：“红色”，
src:“https://i.imgur.com/ZEZLSOo.png",
可拖动：2，
职位：12，
备选案文：“挪威”，
},
{
id:1，
dataid：“b”，
类型：“红色”，
src:“https://i.imgur.com/ZEZLSOo.png",
可拖动：2，
职位：12，
备选案文：“挪威”，
},
{
id:2，
dataid：“a”，
类型：“黑色”，
src:“https://i.imgur.com/dL3J8XS.jpeg",
可拖动：2，
职位：13，
备选案文：“挪威”，
},
{
id:3，
dataid：“b”，
类型：“黑色”，
src:“https://i.imgur.com/dL3J8XS.jpeg",
可拖动：2，
职位：13，
备选案文：“挪威”，
}
]
const itemHTML=（item）=>{
返回`
${item.dataid}
`
}
//基于项属性重新绘制表
const updateTable=（表，项）=>{
$（表）。查找（'td'）。每个（函数（即，e）{
让html=''
const filtered=items.filter(({
位置
})=>位置-1===i）
如果（过滤的长度）{
过滤的.forEach（项=>{
html+=项目html（项目）
})
}否则{
html=！$（e）.parent（）.index（）？i+1:24-$（e）.index（）
}
e、 innerHTML=html
})
}
可更新（'#targetTable tbody'，items）
常量dragrowHTML=({
身份证件
到
}) => {
返回`${id}${to}`
}
$（函数（）{
initDragAndDrop（）；
});
函数clearDragAndDrop（）{
$（'.event'）.off（）；
$（“#目标td”）.off（'dragenter dragover drop'）；
}
函数initDragAndDrop（）{
$（'.event'）。在（'dragstart'，函数（事件）上{
const itemid=event.target.getAttribute（'data-imgid'）
var dt=event.originalEvent.dataTransfer；
//从要删除的位置添加dat attr和类
dt.setData（'id'，itemid）；
});
$（'.event'）。在（'dragend'，函数（event）上{
clearDragAndDrop（）；
initDragAndDrop（）；
});
//更新的事件处理
$（“#targetTable td”）。在（'dragenter dragover drop'，函数（事件）上{
event.preventDefault（）；
如果（event.type=='drop'）{
const itemid=event.originalEvent.dataTransfer.getData（'id'）；
const item=items.find(({
身份证件
})=>id==itemid）
//如果项目是可拖动的
如果（项和项可拖动）{
//计算位置
item.position=（$（event.target）.parent（）.index（）*$（event.target）.parent（）.children（）.length）+（$（event.target）.index（）+1）
//更新表
可更新（'#targetTable tbody'，items）
//更新项目的可拖动属性
$（'#dragtable tbody'）。附加（dragrowHTML({
id:item.id，
收件人：item.position
}))
项目.可拖动--
}
}
});
}

html，
身体{
保证金：0；
}
桌子{
边界塌陷：塌陷；
}
td跨度{
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景色：#09C；
字体大小：粗体；
}
img{
填充：10px；
}
#可拖动{
边界塌陷：塌陷；
}
#可拖动th，
#可牵引td{
边框：1px纯黑；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
24
23
22
21
20
19
18
17
16
15
14
13
身份证件
到

当您将数据与UI分离时，它会变得更容易，这意味着在拖动图像的同时，数据集正在后台处理

在下面的小片段中，我将尝试对您的案例进行分析。如果可以拖动或不拖动，项目将保持跟踪

项目

现在只填充了4个图像，但您可以在其中添加任意数量的图像-它们可以作为单独的项目处理唯一需要注意的是：项目的

id

s必须是唯一的。

const项=[{
id:0，
dataid：“a”，
类型：“红色”，
src:“https://i.imgur.com/ZEZLSOo.png",
可拖动：2，
职位：12，
备选案文：“挪威”，
},
{
id:1，
dataid：“b”，
类型：“红色”，
src:“https://i.imgur.com/ZEZLSOo.png",
可拖动：2，
职位：12，
备选案文：“挪威”，
},
{
id:2，
dataid：“a”，
类型：“黑色”，
src:“https://i.imgur.com/dL3J8XS.jpeg",
可拖动：2，
职位：13，
备选案文：“挪威”，
},
{
id:3，
dataid：“b”，
类型：“黑色”，
src:“https://i.imgur.com/dL3J8XS.jpeg",
可拖动：2，
职位：13，
备选案文：“挪威”，
}
]
const itemHTML=（item）=>{
返回`
${item.dataid}
`
}
//基于项属性重新绘制表
节约