Javascript 具有推送效果的拖放栅格

我正在尝试将网格拖放功能集成到我的项目中。我知道有很多框架正是我想要的。最受欢迎的可能是

我正在寻找一个纯JavaScript的。一个易于破解、易于理解的代码。不是一本很长的代码书。
我做了很多搜索，最终找到了我想要的

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

请注意，在上面的gif中，项目1不会被项目4替换，当您拖动项目1时，所有内容都会向上移动。希望这是清楚的

在这种情况下，如何实现推送效果

函数DragNSort（配置）{
此.$activeItem=null；
这个.$container=config.container；
this.$items=this.$container.querySelectorAll（'.'+config.itemClass）；
this.dragStartClass=config.dragStartClass；
this.dragEnterClass=config.dragEnterClass；
}
DragNSort.prototype.removeClasses=函数（）{
[].forEach.call（此.$items，函数（$item）{
$item.classList.remove（this.dragStartClass，this.dragEnterClass）；
}.约束（这个）；
};
DragNSort.prototype.on=函数（元素、事件类型、处理程序）{
[]forEach.call（元素、函数（元素）{
element.addEventListener（eventType，handler.bind（element，this），false）；
}.约束（这个）；
};
DragNSort.prototype.onDragStart=函数（_此事件）{
_this.$activeItem=此；
this.classList.add（_this.dragStartClass）；
event.dataTransfer.effectAllowed='move'；
event.dataTransfer.setData（'text/html'，this.innerHTML）；
};
DragNSort.prototype.onDragEnd=函数（_this）{
this.classList.remove（_this.dragStartClass）；
};
DragNSort.prototype.onDragEnter=函数（_this）{
this.classList.add（_this.dragEnterClass）；
};
DragNSort.prototype.onDragLeave=函数（_this）{
this.classList.remove（_this.dragEnterClass）；
};
DragNSort.prototype.onDragOver=函数（_此事件）{
if（event.preventDefault）{
event.preventDefault（）；
}
event.dataTransfer.dropEffect='move'；
返回false；
};
DragNSort.prototype.onDrop=函数（\u此事件）{
if（事件停止播放）{
event.stopPropagation（）；
}
如果（_this.$activeItem！==此）{
_this.$activeItem.innerHTML=this.innerHTML；
this.innerHTML=event.dataTransfer.getData（'text/html'）；
}
_这个.removeClasses（）；
返回false；
};
DragNSort.prototype.bind=函数（）{
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.ondraglave）；
this.on（this.$items，'drop'，this.onDrop）；
};
DragNSort.prototype.init=函数（）{
这个。bind（）；
};
//实例化
var draggable=new DragNSort({
容器：document.querySelector（'.drag list'），
itemClass:“拖动项”，
dragStartClass:“拖动开始”，
dragEnterClass:“拖动回车”
});
draggable.init（）
。拖动列表{
溢出：隐藏；
利润率：10px自动；
宽度：500px；
边框：1px实心#ccc；
}
.拖动项目{
浮动：左；
填充：50px 20px；
宽度：25%；
文本对齐：居中；
颜色：#555；
背景：ddd；
边框：1px实心#ccc；
框大小：边框框；
过渡：0.25s；
}
.拖动开始{
不透明度：0.8；
}
.拖动回车键{
不透明度：0.5；
变换：比例（0.9）；
}

A.
B
C
D
E
F
G
H
我
J
K
L

$（函数（）{
$（“#可排序”）.sortable（）；
$（“#可排序”）.disableSelection（）；
});
#可排序{列表样式类型：无；边距：0；填充：0；宽度：60%；光标：移动；}
#可排序li{margin:0 3px 3px 3px；padding:0.4em；padding left:1.5em；字体大小：1.4em；高度：18px；}
#可排序li span{位置：绝对；左边距：-1.3em；}


第1项
第2项
第3项
第4项
第5项
第6项
第7项

谢谢！但我在我的问题中说：我正在寻找一个纯JavaScript的