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

Question

我有两个带有动态子 div 的父 div，现在我想在从一侧下降到另一侧（双向）时实现 POST 到 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));
    }

带有 PHP 数据的 HTML：

<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="<?php echo $user ?>" 和 id="<?php echo $row; ?>"。

Answer 1

这不是一个答案，只是评论太多了。

访问dataset

//REM: Sample structure with three keys
var Rows = [
  {key1: 'key1a', key2: 'key2a', key3: 'key3a'},
  {key1: 'key1b', key2: 'key2b', key3: 'key3b'},
  {key1: 'key1c', key2: 'key2c', key3: 'key3c'}
];

//REM: Having no php here
Rows.forEach(function(item){
  document.body.innerHTML += "<div data-x='" + item.key1 + "' onclick = 'alert(this.dataset.x)'>" + JSON.stringify(item) + "</div>"
});

使用 JSON 格式

//REM: Sample structure with three keys
var Rows = [
  {key1: 'key1a', key2: 'key2a', key3: 'key3a'},
  {key1: 'key1b', key2: 'key2b', key3: 'key3b'},
  {key1: 'key1c', key2: 'key2c', key3: 'key3c'}
];

//REM: Having no php here
Rows.forEach(function(item){
  document.body.innerHTML += "<div data-json='" + JSON.stringify(item) + "' onclick = 'alert(JSON.parse(this.dataset.json).key1)'>" + JSON.stringify(item) + "</div>"
});

我们需要您的实际结构以获得更具体的建议。