以下HTML只能使拖拽的行和释放鼠标的行做交换，如何能实现按顺序插入目标行，并且不影响其他行的顺序，超级感谢。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>直播上品顺序动态展示屏幕</title>
<style type="text/css">
body{
display: flex;
padding: 10px;
flex-direction: column;
}
.p_item{
color: maroon;
font-family: 微软雅黑;
font-size: 40px;
font-weight: bolder;
text-align: left;
background-color: wheat;
border-radius: 10px;
border-right: 3px solid burlywood;
border-bottom: 3px solid burlywood;
width: 980px;
height: 50px;
padding: 10px 20px 10px 30px;
margin-bottom: 5px;
}
.p_item .price{
float: right;
color: sienna;
font-family: 微软雅黑;
font-size: 40px;
font-weight: bolder;
text-align: center;
background-color: white;
border-radius: 10px;
width: 16%;
}
</style>
</head>
<body>
<div class="p_item" draggable="true">我的第一套+嘟嘟熊<div class="price">59.9</div></div>
<div class="p_item" draggable="true">安全生活故事<div class="price">39.9</div></div>
<div class="p_item" draggable="true">宝宝爱上幼儿园+幼儿画报<div class="price">19.9</div></div>
<div class="p_item" draggable="true">百变马丁小火车拼图<div class="price">60</div></div>
<div class="p_item" draggable="true">我的第一本思维游戏书<div class="price">12</div></div>
<div class="p_item" draggable="true">构建受益一生的心智模式<div class="price">69</div></div>
</body>
<script type="text/javascript">
let div =document.getElementsByTagName("div");
let container=null;
// 遍历给每一个div绑定 dragstart dragover以及drop事件
for(let i=0;i<div.length;i++){
div[i].ondragstart=function(){
container=this
}
div[i].ondragover=function(){
event.preventDefault();
}
div[i].ondrop=function(){
debugger;
if(container!=null&&container!=this){
// 具体思路跟变量值互换一样
let temp=document.createElement("div");
document.body.replaceChild(temp,this); //用新建的div占据目的位置
document.body.replaceChild(this,container);// 目的div放置在起始位置
document.body.replaceChild(container,temp) // 起始div放置在目的位置
debugger;
console.log('执行业务逻辑')
}
}
}
</script>
</html>