Javascript перетаскивание, но не может перейти к нижней части (с React)

Question

var placeholder = document.createElement("li");
placeholder.className = "placeholder";

class List extends React.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() {
    var listItems = this.state.colors.map((item, i) => {
      return (
        <li 
          data-id={i}
          key={i}
          draggable='true'
          onDragEnd={this.dragEnd.bind(this)}
          onDragStart={this.dragStart.bind(this)}>{item}</li>
      )
     });
		return (
			<ul onDragOver={this.dragOver.bind(this)}>
        {listItems}
      </ul>
		)
	}
}
class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			colors: ['Red', 'Green', 'Blue', 'Yellow', 'Black', 'White', 'Orange']
		}
	}
	render() {
		return (
			<div>
        <List colors={this.state.colors} />	
			</div>
		)
	}
}

ReactDOM.render(
	<App />,
    document.getElementById('app')
);

body {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

h1 {
  border-left: 5px solid #e1e1e1;
  padding-left: 5px;
}

ul {
  list-style: none;
  margin:0;
  padding:0;
  border: 5px solid #e1e1e1;
  box-shadow: 1px 3px 8px #888; 
}
li {
  padding: 10px 15px;
  background:#eee;
  &:hover {
    background: darken(#eee, 5%);
  }
}

.placeholder {
  background: rgb(255,240,120);
  &:before {
    content: "Drop here";
    color: rgb(225,210,90);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<h1>React Drag &amp; Drop</h1>
<div id="app"></div>

Существует простой источник перетаскивания с реагированием.

Здесь есть некоторые ошибки.

1.При перетаскивании элемента вниз, возникает ошибка.

2.Не удается выполнить Swtich для последнего элемента.

Похоже, что проблема с кодом ниже.

e.target.parentNode.insertBefore (placeholder, e.target);

Вот исходный код.

https://codepen.io/adamaoc/pen/GoKZKE

Спасибо.