Javascript 如何通过拖放（使用angular2/4）对4个div重新排序？

假设我有4个div，宽度和高度为100px，在一个宽矩形的父div中有一个“float left”。有没有什么优雅的方法可以让我拖放div，以便在宽的水平条上对它们重新排序？

类似这样的东西？找到了一个带有jquery的示例

$（函数（）{
$（“.column”）.sortable({
连接到：“.column”，
句柄：“.portlet头”，
取消：“.portlet切换”，
占位符：“portlet占位符ui角点全部”
});
$（“.portlet”）
.addClass（“ui小部件ui小部件内容ui帮助程序clearfix ui角点全部”）
.find（“.portlet头”）
.addClass（“ui小部件标题ui角点全部”）
.prepend（“”）；
$（“.portlet切换”）。打开（“单击”，函数（）{
var icon=$（这个）；
toggleClass（“ui图标+ui图标+图标图标”）；
icon.closest（“.portlet”）.find（“.portlet内容”）.toggle（）；
});
});
.column{
宽度：100px；
高度：100px；
浮动：左；
填充底部：100px；
}
.portlet{
利润率：0.1米1米0；
填充：0.1米；
}
.portlet头{
填充：0.2em 0.3em；
边缘底部：0.5em；
位置：相对位置；
}
.portlet切换{
位置：绝对位置；
最高：50%；
右：0；
利润上限：-8px；
}
.portlet内容{
填充：0.4em；
}
.portlet占位符{
边框：1px点黑色；
利润率：0.1米1米0；
高度：50px；
}

喂
我的饲料
新闻
我的消息
商店
我的购物
链接
我的链接
是否使用
浮动
作为一项要求？目前，我使用浮动来对齐页面上的div，使它们在水平方向上彼此相邻。不知道我还能怎么做。如果有其他方法使它不使用float并且看起来一样，我愿意接受这种可能性。我想你可以使用
flex-box
和DOM操作来实现这一点。。使用javascript计算被拖动的元素应该放在哪个索引中，然后
flex-box
应该处理其余的索引。我现在没有时间提供一个有效的例子。