javascript - 如何在javascript中将拖放区域的宽度调整为100%

Question

我有一个代码，其中有一个 dragitem1 和一个 dropitem1，

Dragitem1可以拖放到Dropitem1，

我的问题是dropping Dragitem1，我想要 dragitem1 宽度为100 % 放置区域(在 Dropitem1 内)。

为此我使用了

assignedTabName[0].style.width = "100%";

但没有给出预期的结果。

如何使 dragitem1 在掉落区域(掉落后)达到 100%？

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");
  console.log(data);
  assignedTabName = document.getElementById(data).className;
  console.log(assignedTabName);

  ev.target.appendChild(document.getElementById(data));
    assignedTabName[0].style.width = "100%";
}

.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;}

<div class="dragitem1" draggable="true" ondragstart="drag(event)" id="drag1">
    <p id="p1">TEST</p>
    </div>

	<div class="dropitem1" ondrop="drop(event)" ondragover="allowDrop(event)" id="drop1">
    </div>

Answer 1

这应该是您用于函数 drop()

的代码

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  console.log(data);
  assignedTabName = document.getElementById(data);
  console.log(assignedTabName.className);
  ev.target.appendChild(assignedTabName);
  assignedTabName.style.width = "100%";
}