Javascript 使用jquery垂直重新组织div

我有5个div垂直向下一页

我希望能够点击任何一个，并让它成为顺序中的第一个div，某种程度上是“列表”的顶部。在一个完美的世界中，其他人会变暗/减少不透明度，单击的人会向上滑动/设置动画，而其他人会向下碰撞。但是，这可能会在以后发生。我见过使用CSS对div进行重新排序，但这在页面上不是连续动态的

我尝试将所有5个div放入容器包装器中，并在css中执行此操作：

#包装器{显示：表；}

使用此javascript（单击第二个div的示例）：

但这打乱了我在div上的圆角、对齐方式和现有css的其他部分

---

这似乎不难，但我想不出来。谢谢你的帮助

一个非常简单的解决方案：使用jQuery的

prepend（）

将元素移动到父元素的顶部

$（“div”）。单击（函数（）{
$（this.parent（）.prepend（$（this））；
});

第一组
第二组
第三组
第四组
第五组
第六组
第7课
第8课
第9课
Div10
一个非常简单的解决方案：使用jQuery的
prepend（）
将元素移动到父元素的顶部


$（“div”）。单击（函数（）{
$（this.parent（）.prepend（$（this））；
});

第一组
第二组
第三组
第四组
第五组
第六组
第7课
第8课
第9课
第10部分看下面的例子

您的最终目标似乎与此jQuery UI功能一致。
请查看

您的最终目标似乎与此jQuery UI功能一致。

$（'.reorderable'）。单击（函数（）{
$（this.prependTo）（this.parentNode）；
});

第一
第二
第三
第四
第五

$（'.reorderable'）。单击（函数（）{
$（this.prependTo）（this.parentNode）；
});

第一
第二
第三
第四
第五
不鼓励仅链接答案。请添加一个代码示例来解释您的意思。不建议使用仅链接的答案。请添加一个代码示例来解释您的意思。
$('#secondDiv').css("display","table-header-group");
$('#firstDiv').css("display","table-row-group");
$('#thirdDiv').css("display","table-row-group");
$('#fourthDiv').css("display","table-row-group");
$('#fifthDiv').css("display","table-row-group");