Javascript 如何在将项目从一个div拖到另一个div时发布到PHP？

我有两个带有动态子div的父div，现在我想在从一侧拖放到另一侧（两种方式）时实现POST-to-PHP

我的Javascript:

    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        console.log('drag', ev.target.id);
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
        console.log('drop', ev.dataTransfer.getData("text"));
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }

<fieldset id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <legend style="color:cadetblue; border:white; width:auto; font:bold">Vacant parking spots</legend>
    <?php
    foreach ($sql_get_vacant_spots_results_ as $row) { ?>
        <div id="<?php echo $row; ?>" style="float: left; width: 120px;height: 80px;padding: 10px;border-radius: 20px;margin: 10px;background-color: cadetblue;" draggable="true" ondragstart="drag(event)" width="88" height="31">
            <labled style="color: white; font:bold; font-size:large;"><?php echo 'Spot: ' . $row['spot_no'] . ' Gate: ' . $row['parking_gate_id'] ?></label>
        </div>
    <?php }
     ?>
</fieldset>

<fieldset id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <legend style="color:cadetblue; border:white; width:auto; font:bold">Current parking spots of the customer</legend>
    <?php
    foreach ($arr_users as $user) { ?>
        <div id="<?php echo $user ?>" style="float: left; width: 120px;height: 80px;padding: 10px;border-radius: 20px;margin: 10px;background-color: cadetblue;" draggable="true" width="88" height="31">
            <labled style="color: white; font:bold; font-size:large;"><?php echo 'Spot: ' . $user['spot_id'] . ' Gate: ' .  $user['gate_id'] ?></label>
        </div>
    <?php
    } ?>
</fieldset>

带有PHP数据的HTML:

    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        console.log('drag', ev.target.id);
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
        console.log('drop', ev.dataTransfer.getData("text"));
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }

<fieldset id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <legend style="color:cadetblue; border:white; width:auto; font:bold">Vacant parking spots</legend>
    <?php
    foreach ($sql_get_vacant_spots_results_ as $row) { ?>
        <div id="<?php echo $row; ?>" style="float: left; width: 120px;height: 80px;padding: 10px;border-radius: 20px;margin: 10px;background-color: cadetblue;" draggable="true" ondragstart="drag(event)" width="88" height="31">
            <labled style="color: white; font:bold; font-size:large;"><?php echo 'Spot: ' . $row['spot_no'] . ' Gate: ' . $row['parking_gate_id'] ?></label>
        </div>
    <?php }
     ?>
</fieldset>

<fieldset id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <legend style="color:cadetblue; border:white; width:auto; font:bold">Current parking spots of the customer</legend>
    <?php
    foreach ($arr_users as $user) { ?>
        <div id="<?php echo $user ?>" style="float: left; width: 120px;height: 80px;padding: 10px;border-radius: 20px;margin: 10px;background-color: cadetblue;" draggable="true" width="88" height="31">
            <labled style="color: white; font:bold; font-size:large;"><?php echo 'Spot: ' . $user['spot_id'] . ' Gate: ' .  $user['gate_id'] ?></label>
        </div>
    <?php
    } ?>
</fieldset>

空置停车位
客户当前的停车位

---

现在，主要的问题是我必须将数组设置为子div的ID，因为我从数据库中获取的元素没有自动递增（唯一ID）。正如您所见，我已经将整个数组作为id

id=“”

和

id=“”

附加到了一起，这不是一个答案，只是评论太多了

访问

//REM：带有三个键的示例结构
变量行=[
{key1:'key1a'，key2:'key2a'，key3:'key3a'}，
{key1:'key1b'，key2:'key2b'，key3:'key3b'}，
{key1:'key1c'，key2:'key2c'，key3:'key3c'}
];
//雷姆：这里没有php
Rows.forEach（函数（项）{
document.body.innerHTML+=“”+JSON.stringify（项）+“”
});如果您需要id，为什么不使用
$row['id']
@Simone Rossaini:可能是因为没有：…因为元素没有自动递增（唯一id）…如果存在foreach，他可以“创建”它，请使用计数器no？例如，如果id是'1'，他可以使用'1-1'，因此将是唯一的，如果出现另一个'1'，简单的将是'2-1'@SimoneRossaini，我已经用$counter++尝试过了，但正如莱恩所说，数据库将如何识别这一点？因此，我必须将整个数组发布到PHP，然后在PHP中处理循环。。只要以
data-
开头，就可以使用自定义属性。我已经尝试过这种方法：
const el=document.querySelector（“#”+ev.dataTransfer.getData（“text”）但它抛出了以下错误：“未能对“文档”执行“querySelector”：“#33”不是有效的选择器。”。因此，正如您所看到的，它确实找到了id，但没有将其识别为有效的选择器。
id
不应以数字开头。使用前缀或
getElementById（）
。您能给出行的示例吗？像三排吗？