如何实现拖拽元素仅可放置到对应目标放置区？

嘿，这个需求其实挺常见的，咱们只需要给拖拽元素和对应的放置区加上匹配标识，然后在拖拽过程中做校验就能搞定啦。我结合你现有代码一步步改给你看：

第一步：给元素和区域添加匹配标识 #

首先在HTML里，给每个可拖拽元素加一个自定义属性（比如data-type），对应的放置区加data-accept属性来指定它能接受的类型：

<!-- 示例拖拽元素 -->
<div draggable="true" id="elem1" data-type="typeA">元素A</div>
<div draggable="true" id="elem2" data-type="typeB">元素B</div>

<!-- 示例放置区 -->
<div class="zielzone dropzone" data-accept="typeA">仅接受A的区域</div>
<div class="zielzone dropzone" data-accept="typeB">仅接受B的区域</div>

第二步：完善拖拽开始事件（补充你的ziehen函数） #

你的代码里没贴ziehen函数，我先补上，并且在拖拽开始时把元素的类型也存入dataTransfer，这样放置时能拿到这个类型：

function ziehen(ev) {
    // 存储元素ID（你原来的逻辑）
    ev.dataTransfer.setData('text', ev.target.id);
    // 新增：存储元素的匹配类型
    ev.dataTransfer.setData('type', ev.target.dataset.type);
}

第三步：修改放置函数，添加类型校验 #

在ablegen函数里，先获取拖拽元素的类型和目标区域接受的类型，不匹配就直接终止操作：

function ablegen(ev) {
    ev.preventDefault();
    var dataId = ev.dataTransfer.getData('text');
    // 拿到拖拽元素的类型
    var dragType = ev.dataTransfer.getData('type');
    var target = ev.target;

    // 找到真正的dropzone元素（你原来的逻辑，加个防错判断）
    while (" "+target.className+" ".indexOf(" dropzone ") == -1) {
        target = target.parentNode;
        if (!target) return; // 防止找不到父元素时出错
    }

    // 核心校验：判断区域是否接受该类型
    var acceptType = target.dataset.accept;
    if (dragType !== acceptType) {
        console.log("这个区域不接受该元素哦！");
        // 也可以在这里加页面提示，比如弹出个小气泡
        return;
    }

    // 类型匹配才执行放置操作
    target.appendChild(document.getElementById(dataId));
}

可选优化：添加视觉反馈 #

为了让用户更直观知道能不能放，咱们可以在拖拽进入区域时改变样式：

// 拖拽进入区域时的样式变化
function dragEnter(ev) {
    ev.preventDefault();
    var dragType = ev.dataTransfer.getData('type');
    var target = ev.target;
    while (" "+target.className+" ".indexOf(" dropzone ") == -1) {
        target = target.parentNode;
        if (!target) return;
    }
    // 匹配时高亮，不匹配时标红
    target.style.backgroundColor = dragType === target.dataset.accept ? "#e0f7fa" : "#ffebee";
}

// 拖拽离开区域时恢复样式
function dragLeave(ev) {
    var target = ev.target;
    while (" "+target.className+" ".indexOf(" dropzone ") == -1) {
        target = target.parentNode;
        if (!target) return;
    }
    target.style.backgroundColor = "";
}

然后在页面加载的事件绑定里加上这两个新事件：

window.addEventListener("load",function () {
    var elms = document.querySelectorAll(".zielzone");
    for (var i = 0; i < elms.length; i++) {
        var zielzone = elms[i];
        zielzone.addEventListener("drop",ablegen);
        zielzone.addEventListener("dragover",ablegenErlauben);
        // 新增下面两个事件
        zielzone.addEventListener("dragenter",dragEnter);
        zielzone.addEventListener("dragleave",dragLeave);
    };
    elms = document.querySelectorAll("[draggable=true]")
    for (var i = 0; i < elms.length; i++) {
        var draggable = elms[i];
        draggable.addEventListener("dragstart",ziehen);
    };
});

扩展说明 #

如果你的场景需要一个放置区接受多种类型，只需要把data-accept设为逗号分隔的字符串（比如data-accept="typeA,typeB"），然后把校验逻辑改成：

if (!acceptType.split(',').includes(dragType)) {
    console.log("这个区域不接受该元素哦！");
    return;
}

这样就支持多类型匹配啦～

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