JavaScript如何获取被拖拽释放的div的type属性并修改drop函数

前置优化建议（可选，更符合HTML规范） #

type不是div标签的原生标准属性，直接使用可能存在潜在的属性冲突风险，更推荐用HTML标准的自定义data属性存储自定义标识，你只需要把div的属性调整为data-type即可，示例：

<div id='3' data-type='touchMyDiv'>
<div id='6' data-type='otherType'>

如果你不想修改现有属性定义，直接读取type属性也可以正常运行。

实现逻辑 #

你只需要在drop函数中拿到拖拽元素的ID后，先获取对应的DOM对象，再读取对应的属性值作为变量即可，后续可以根据这个变量的值走不同的业务分支。

修改后的完整代码 #

方案1：drop阶段读取DOM属性（改动最小） #

function allowDrop(ev) {
  ev.preventDefault();
}
function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var contentID = ev.dataTransfer.getData("text");
    // 获取拖拽元素DOM对象
    const dragElement = document.getElementById(contentID);
    // 读取type属性，如果你用了data-type，这里改为 dragElement.dataset.type
    const divType = dragElement.getAttribute('type');
    ev.target.appendChild(dragElement);

    // 后续可以根据divType做不同逻辑，示例：
    if (divType === 'touchMyDiv') {
        window.location.href = "/?a=deleteTable&tableID=" + contentID;
    } else if (divType === 'otherType') {
        // 其他类型的业务逻辑，比如跳转到其他地址
        window.location.href = "/?a=otherHandle&tableID=" + contentID;
    }
}

方案2：drag阶段存储属性（性能更优，无需drop阶段查询DOM） #

如果你不想在drop的时候再查询DOM，可以在拖拽开始时就把ID和type一起存入传输对象：

function allowDrop(ev) {
  ev.preventDefault();
}
function drag(ev) {
  // 把ID和type序列化后存入
  const dragData = {
    id: ev.target.id,
    type: ev.target.getAttribute('type')
  }
  ev.dataTransfer.setData("text", JSON.stringify(dragData));
}
function drop(ev) {
    ev.preventDefault();
    // 解析传输的数据
    const dragData = JSON.parse(ev.dataTransfer.getData("text"));
    const contentID = dragData.id;
    const divType = dragData.type;
    const dragElement = document.getElementById(contentID);
    ev.target.appendChild(dragElement);

    // 后续业务逻辑和方案1一致
    if (divType === 'touchMyDiv') {
        window.location.href = "/?a=deleteTable&tableID=" + contentID;
    }
}

内容的提问来源于stack exchange，提问作者Chris98