如何在 JavaScript 中将放置区域的宽度调整为 100%

Question

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

Dragitem1 可以拖放到 Dropitem1，

我的问题是dropping Dragitem1，我want dragitem1 width to be 100% on dropped area（在 Dropitem1 内部）。

为此，我使用了

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

但没有给出预期的结果。

如何使拖放区域达到 100%（下降后）的 dragitem1？

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%";
}

Answer 2

更改assignedTabName[0] document.getElementById(data) ，您尝试将样式设置为字符串

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));
    document.getElementById(data).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 3

您正在使用 assignedTabName[0] 访问类名的第一个字符。获取元素一次并将其存储在变量中，检查它是否存在，然后更改样式并附加它。

function drop(event) {
  event.preventDefault();
  const id = event.dataTransfer.getData("text");
  const element = document.getElementById(id);
  if (element) {
    element.style.width = "100%";
    event.target.appendChild(element);
    assignedTabName = element.className;
  }
}