HTML中使用draggable时如何取动态数据的id值？

Question

我有两个 divs parents，我在其中显示来自数据库的一些动态数据。数据显示在 children div 内，因此，当从一个 div 拖动到另一个时，我也想获取该项目的 ID。现在，我只想能够使用警报功能在 Javascript 中打印它。

Javascript 函数：

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

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

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

Html divs 与 PHP 数据：

 <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="free_spots_div" draggable="true" ondragstart="drag(event)" id="drag1" 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="customers_spot_div" 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>

Answer 1

目前您的 for-loop 将重复元素 id。 id 在整个文档中应该是唯一的。另外你的 div 当前有两个属性 id:

<div id="free_spots_div" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">

getElementById() 只会 select 匹配元素的第一次出现。

这是一个带有额外 console.log() 的小样本。

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>
    
    <!-- id are to be unique -->
    <div id="free_spots_div1" draggable="true" ondragstart="drag(event)" width="88" height="31">
        <labled style="font:bold; font-size:large;">parking_gate_id1</label>
    </div>

    <!-- id are to be unique -->
    <div id="free_spots_div2" draggable="true" ondragstart="drag(event)" width="88" height="31">
        <labled style="font:bold; font-size:large;">parking_gate_id2</label>
    </div>

    <!-- id are to be unique -->
    <div id="free_spots_div3" draggable="true" ondragstart="drag(event)" width="88" height="31">
        <labled style="font:bold; font-size:large;">parking_gate_id3</label>
    </div>
</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>
    <div id="customers_spot_div" draggable="true" width="88" height="31">
        <labled style="font:bold; font-size:large;">gate_id</label>
    </div>
</fieldset>

HTML中使用draggable时如何取动态数据的id值？

How to take the id value of dynamic data when using draggable in HTML?

html

javascript

php

drag-and-drop

draggable