Javascript jQuery可对静态内容进行排序

我使用Bootstrap和jQuery编写了一个网站。现在，我在网页底部有一个div的水平列表。它的作用类似于Microsoft Powerpoint中的幻灯片条。数字是不可更改的元素。如果我从服务器获得6条记录，它将在列表中生成6张幻灯片。用户可以拖动“DIV”框并移动到另一个位置。就像可排序插件的正常流程一样。

预期结果： 我尝试了两种方法来编码这个“滑动条”。但是，我无法构建预期的结果

概念1： 拆分两行以执行。但将有两个可滚动的

1.
2.
3.
4.
5.
6.

.row
{
宽度：100%；
}
.col-md-12、.slideNumber
{
宽度：100%；
显示器：flex；
右边距：50px；
}
.盒子
{
宽度：50px；
高度：50px；
背景：灰色；
文本对齐：居中；
线高：50px；
垂直对齐：中间对齐；
}

1.
Div
2.
Div
3.
Div
4.
Div
5.
Div
6.
Div

这应该可以：

$（函数（）{
$（“.sortable list”）
.sortable（）
.disableSelection（）；
} );
.container>div{
填充：0 30px 0px 30px；
显示：内联块；
}
.可排序列表>div{
保证金：1px；
显示：内联块；
填充：30px；
背景：#777；
边框：1px纯黑；
}

1.
2.
3.
4.
5.
6.
请添加CSS因为我无法编写预期的结果，我只是在上面添加了大致的CSS。是的，这是我的第二种方法。在拖动框时，可以在这种方法中应用可排序插件，而无需重新定位。