[英]How to take the id value of dynamic data when using draggable in HTML?
我有兩個 div 父母,我在其中顯示數據庫中的一些動態數據。 數據顯示在子 div 中,因此,當從一個 div 拖動到另一個 div 時,我也想獲取該項目的 id。 現在,我只想能夠使用警報 function 在 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 div 與 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>
目前,您的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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.