javascript - HTML中使用draggable时如何取动态数据的id值?
问题描述
我有两个 div 父母,我在其中显示数据库中的一些动态数据。数据显示在子 div 中,因此,当从一个 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));
}
带有 PHP 数据的 Html div:
<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
current 也有两个属性id
:
<div id="free_spots_div" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
getElementById()
只会选择匹配元素的第一次出现。
这是一个附加的小样本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>
推荐阅读
- javascript - 套接字代码在 Codeigniter rest api 中不起作用
- angular - previousIndex 使用 Angular Material 拖放 + cdk 虚拟滚动意外跳转
- .net - Web Api 2.0 在邮递员中工作但不在 HTML 页面中
- ios - 如何在 SwiftUI 中显示 PHLivePhotoView
- python - Xml 解析不起作用 - 它不返回任何内容
- websphere - IBM BPM/WebSphere 如何连接到 SQL Server 数据库
- amazon-web-services - aws efs 文件系统未与 describe-file-systems 一起列出
- php - 使用 Elementor 插件和自定义查询难度按 Wordpress 中的大多数视图/热门帖子排序
- c++ - 为什么我们有两个 const 声明函数
- c# - 即使存在 try 块,从 SQL 表中获取数据也会引发空异常