Как отрегулировать ширину до 100% в пропущенной области в javascript

У меня есть код, в котором есть dragitem1 и dropitem1,

Dragitem1 можно перетащить на Dropitem1,

Моя проблема находится на droppingDragitem1, и wantdragitem1 width to be 100%on dropped area(внутри 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.info(data);
  assignedTabName = document.getElementById(data).className;
  console.info(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>

javascript jquery html css

30.01.2019 11:38

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Замените 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.info(data);
  assignedTabName = document.getElementById(data).className;
  console.info(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>

30.01.2019 11:48

Вы обращаетесь к первому символу имени класса с помощью 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;
  }
}

30.01.2019 11:49

Это должен быть ваш код для падение функции()

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

30.01.2019 11:54

Другие вопросы по теме

Анимация частиц логотипа

Как рассчитать и отобразить значение ОКРУГЛОГО с двумя десятичными разрядами

Увеличение счетчика бросков на 1

JQuery копирует и вставляет с помощью document.execCommand («копировать») и («вставить»)

Инкрементная задержка перехода для добавленных элементов

У меня проблема с запросом UPDATE моей базы данных в PHP

Предотвратить отсоединение выпадающего списка select2 при закрытии, чтобы анимировать его

Контроллер не получает данные, отправленные от Ajax

Как я могу свернуть дочерний tr прямо под его родительским столбцом?

Отправка формы оформления заказа с использованием ajax

Как отрегулировать ширину до 100% в пропущенной области в javascript

Ответы 3

Другие вопросы по теме

Похожие вопросы