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

Question

我有两个div父级，我在其中显示数据库中的一些动态数据。数据显示在子div中，因此，当从一个div拖动到另一个div时，我也想获取该项的id。现在，我只想能够使用alert函数在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-dvs与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">

CCD_ 6将仅选择匹配元素的第一个位置。

这是一个带有附加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>