Question

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

Dragitem1可以拖放到Dropitem1，

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

为此我用

on dropped area

但是没有给出预期的结果。

如何使dragitem1的下落区域（下落后）达到100％？

assignedTabName[0].style.width = "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;}

Answer 1

这应该是您用于 function 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;
  }
}

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

3 个答案: