Я разрабатываю перетаскиваемый вертикальный список для перетаскивания строк, используя реагирование.

Я создал 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