使用推动效果拖放网格

Question

我正在尝试将网格拖放功能集成到我的项目中。我知道有很多很多框架可以满足我的需求。最受欢迎的可能是JQuery UI's sortable library。

我正在寻找一款纯JavaScript。一个可以破解，易于理解的代码。不是一整本代码。
我做了很多搜索，最后我想出了this codepen，这正是我正在寻找的。

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

注意在上面的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>

Answer 1

  $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });

 #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%;cursor:move;  }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">



 
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>