如何在JavaScript中设置拖拽元素在目标区域宽度为100%？

你遇到的问题核心是错误地操作了字符串而非DOM元素：你的代码中assignedTabName = document.getElementById(data).className;获取的是元素的类名字符串（比如"dragitem1"），而assignedTabName[0]只是这个字符串的第一个字符（"d"），自然无法通过它设置元素样式。

下面提供两种可行的解决方案：

方案1：直接操作DOM元素的样式 #

直接获取拖拽的DOM元素，然后修改它的style.width属性，同时建议移除原有的margin（避免元素无法完全填满目标容器）：

修改后的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");
    // 获取拖拽的DOM元素
    const draggedItem = document.getElementById(data);
    ev.target.appendChild(draggedItem);
    // 设置宽度为100%，并清除margin
    draggedItem.style.width = "100%";
    draggedItem.style.margin = "0";
}

方案2：使用CSS类控制样式（推荐） #

将样式逻辑放在CSS中，通过添加类的方式控制元素状态，这种方式更符合"样式与逻辑分离"的原则，也更容易维护：

首先在CSS中添加一个用于拖拽完成后的类：

.dragitem1{
    border:2px solid black;
    width: calc(16.3% - 4px);
    height:80%;
    margin-left:0.5%;
    margin-top:0.5%;
    margin-right:0.5%;
    background-color:#2ecc71;
}
.dropitem1{
    border:2px solid black;
    position:fixed;
    width:23vw;
    height:10vh;
    left:30vw;
    bottom:80vh;
}
/* 新增：拖拽完成后的样式 */
.dragitem1.dropped {
    width: 100%;
    margin: 0;
    height: 100%; /* 可选：如果希望高度也填满容器，可以加上这行 */
}

然后修改JavaScript的drop函数，添加这个类：

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");
    const draggedItem = document.getElementById(data);
    ev.target.appendChild(draggedItem);
    // 添加类来应用样式
    draggedItem.classList.add("dropped");
}

额外说明 #

• 原代码中assignedTabName变量完全没有必要，因为我们直接操作DOM元素即可。
• 如果希望拖拽元素的高度也填满目标容器，可以在样式中添加height: 100%;（如方案2中的注释所示）。

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