Как заставить этот конкретный div перетаскивать не может быть за пределами родительского div
23 просмотра
1 ответ
440 Репутация автора
Я разрабатываю перетаскиваемый вертикальный список для перетаскивания строк, используя реагирование.
Я создал div с именем класса с именем placeholder, этот конкретный div используется для создания пространства между другими div-объектами, куда он будет добавлен.
Моя проблема в том, что этот конкретный div, как его можно перетаскивать, можно вытащить из div, который его содержит. И покажи мне следующую ошибку, потому что она снаружи:
NotFoundError: Не удалось выполнить «removeChild» на «Узле»: удаляемый узел не является дочерним по отношению к этому узлу.
Как сделать так, чтобы этот конкретный div не мог быть снаружи от div, созданного ??
Вот код:
import React, { Component } from 'react';
import Item from '../Item';
import './list.scss';
let placeholder = document.createElement("div");
placeholder.className = "placeholder";
class DraggableVerticalList extends Component {
constructor(props) {
super(props);
this.state = {...props};
}
dragStart = (e) => {
this.dragged = e.currentTarget;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.dragged);
};
dragEnd = (e) => {
this.dragged.style.display = 'block';
this.dragged.parentNode.removeChild(placeholder);
// update state
var data = this.state.colors;
var from = Number(this.dragged.dataset.id);
var to = Number(this.over.dataset.id);
if(from < to) to--;
data.splice(to, 0, data.splice(from, 1)[0]);
this.setState({ colors: data });
};
dragOver = (e) => {
e.preventDefault();
this.dragged.style.display = "none";
if(e.target.className === 'placeholder') return;
this.over = e.target;
e.target.parentNode.insertBefore(placeholder, e.target);
};
render() {
return (
<div className="draggable-container" onDragOver={this.dragOver.bind(this)}>
{ this.state.colors.map((item, i) => {
return (
<div className="item" data-id={i} key={i} draggable='true' onDragEnd={this.dragEnd.bind(this)} onDragStart={this.dragStart.bind(this)}>
<Item item={item} key={i} />
</div>
)})}
</div>
);
}
}
export default DraggableVerticalList;
Его файл CSS:
.draggable-container {
width: 100%;
height: 100%;
padding: 10px 10px;
background-color: rgb(233, 201, 201);
border-radius: 10px;
.draggable-list {
padding: 5px;
}
}
.placeholder {
background: rgb(255,240,120);
width: 100%;
height: 40px;
&:before {
content: "Drop here";
color: rgb(225,210,90);
}
}
Автор: Javier
Источник
Размещён: 10.08.2019 11:59
Ответы (1)
0 плюса
440 Репутация автора
РЕШИТЬ:
dragOver = (e) => {
e.preventDefault();
/* With this line div cant be outside */
if (e.target.className === 'draggable-container') return;
this.dragged.style.display = "none";
if(e.target.className === 'placeholder') return;
this.over = e.target;
e.target.parentNode.insertBefore(placeholder, e.target);
};
Автор: Javier
Размещён: 11.08.2019 08:31
Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- javascript Скрипт входа со скрытыми кнопками
- javascript Как автоматически изменить размер текстовой области с помощью Prototype?
- javascript Удаление элементов с помощью Array.map в JavaScript
- javascript Прокрутка переполненных DIV с помощью JavaScript
- javascript API Карт Google - проблемы с классом GLatLngBounds
- javascript Проверка десятичных чисел в JavaScript - IsNumeric ()
- reactjs Реагируйте на js и bootstrap модально из примеров на github
- reactjs реагировать - ссылка на тег
- reactjs this.setState не объединяет состояния, как я ожидал
- reactjs Rerender вид в браузере изменить размер с React
- reactjs Рендеринг компонента React в поповере Bootstrap
- reactjs Как получить доступ к пользовательским атрибутам из объекта события в React?
- reactjs Как мне симулировать события браузера при написании тестов для React js?
- reactjs React.js: избегайте обновлений редактируемого в данный момент ввода
- reactjs ReactJS: моделирование двунаправленной бесконечной прокрутки
- reactjs Reactjs: Неожиданный токен '<' Ошибка