具有级联推动效果的拖放网格

Question

我正在寻找一种纯JavaScript。

我唯一的问题是，我希望拖动的元素将其他元素推开。像这样的效果：

上面的gif通知中，第1项未替换为第4项，当您拖动第1项时，一切都会向上移动。希望如此。

在codepen中，如何制作推送效果？

function DragNSort(config) {
  this.$activeItem = null;
  this.$container = config.container;
  this.$items = this.$container.querySelectorAll('.' + config.itemClass);
  this.dragStartClass = config.dragStartClass;
  this.dragEnterClass = config.dragEnterClass;
}

DragNSort.prototype.removeClasses = function() {
  [].forEach.call(this.$items, function($item) {
    $item.classList.remove(this.dragStartClass, this.dragEnterClass);
  }.bind(this));
};

DragNSort.prototype.on = function(elements, eventType, handler) {
  [].forEach.call(elements, function(element) {
    element.addEventListener(eventType, handler.bind(element, this), false);
  }.bind(this));
};

DragNSort.prototype.onDragStart = function(_this, event) {
  _this.$activeItem = this;

  this.classList.add(_this.dragStartClass);
  event.dataTransfer.effectAllowed = 'move';
  event.dataTransfer.setData('text/html', this.innerHTML);
};

DragNSort.prototype.onDragEnd = function(_this) {
  this.classList.remove(_this.dragStartClass);
};

DragNSort.prototype.onDragEnter = function(_this) {
  this.classList.add(_this.dragEnterClass);
};

DragNSort.prototype.onDragLeave = function(_this) {
  this.classList.remove(_this.dragEnterClass);
};

DragNSort.prototype.onDragOver = function(_this, event) {
  if (event.preventDefault) {
    event.preventDefault();
  }

  event.dataTransfer.dropEffect = 'move';

  return false;
};

DragNSort.prototype.onDrop = function(_this, event) {
  if (event.stopPropagation) {
    event.stopPropagation();
  }

  if (_this.$activeItem !== this) {
    _this.$activeItem.innerHTML = this.innerHTML;
    this.innerHTML = event.dataTransfer.getData('text/html');
  }

  _this.removeClasses();

  return false;
};

DragNSort.prototype.bind = function() {
  this.on(this.$items, 'dragstart', this.onDragStart);
  this.on(this.$items, 'dragend', this.onDragEnd);
  this.on(this.$items, 'dragover', this.onDragOver);
  this.on(this.$items, 'dragenter', this.onDragEnter);
  this.on(this.$items, 'dragleave', this.onDragLeave);
  this.on(this.$items, 'drop', this.onDrop);
};

DragNSort.prototype.init = function() {
  this.bind();
};

// Instantiate
var draggable = new DragNSort({
  container: document.querySelector('.drag-list'),
  itemClass: 'drag-item',
  dragStartClass: 'drag-start',
  dragEnterClass: 'drag-enter'
});
draggable.init();

.drag-list {
  overflow: hidden;
  margin: 10px auto;
  width: 500px;
  border: 1px solid #ccc;
}

.drag-item {
  float: left;
  padding: 50px 20px;
  width: 25%;
  text-align: center;
  color: #555;
  background: #ddd;
  border: 1px solid #ccc;
  box-sizing: border-box;
  transition: 0.25s;
}

.drag-start {
  opacity: 0.8;
}

.drag-enter {
  opacity: 0.5;
  transform: scale(0.9);
}

<div class="drag-list">
  <div draggable="true" class="drag-item">A</div>
  <div draggable="true" class="drag-item">B</div>
  <div draggable="true" class="drag-item">C</div>
  <div draggable="true" class="drag-item">D</div>
  <div draggable="true" class="drag-item">E</div>
  <div draggable="true" class="drag-item">F</div>
  <div draggable="true" class="drag-item">G</div>
  <div draggable="true" class="drag-item">H</div>
  <div draggable="true" class="drag-item">I</div>
  <div draggable="true" class="drag-item">J</div>
  <div draggable="true" class="drag-item">K</div>
  <div draggable="true" class="drag-item">L</div>
</div>

我尝试过的是

var buttons = document.getElementsByTagName('span');
for(var i = 0; i < buttons.length; i++){
  buttons[i].ondragstart = function(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
  }
  
  document.getElementById('buttons').ondragover = function(ev) {
    ev.preventDefault();
  }
  
  document.getElementById('buttons').ondrop = function(ev) {
    var data = ev.dataTransfer.getData("Text");
	  ev.preventDefault();	$(document.getElementById(data)).insertBefore(ev.target);
  }
}

span {
  border: 1px solid black;
  background: grey;
  color: white;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttons">
  <span draggable="true" id="btn1">1</span>
  <span draggable="true" id="btn2">2</span>
  <span draggable="true" id="btn3">3</span>
  <span draggable="true" id="btn4">4</span>
  <span draggable="true" id="btn5">5</span>
</div>

但没有预期的效果，我也不知道如何获得效果