思路：
1.獲取到拖拽目標和被替換的目標索引值。
2.數組截取2個索引值之間的數組 dealArr ，數組第一部分resetArr1 ,第二部分resetArr2。
3.比較拖拽元素的索引值和被替換元素的索引值，根據值的大小對dealArr重新排序
4.將 resetArr1、 dealArr、 resetArr2重新合併即爲排序後的數組
下面是代碼實例，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;}
div{margin: 30px;}
.clearfix{ *zoom:1;}
.clearfix:after{
content: '';
display: block;
visibility: hidden;
clear: both;
height: 0px;
}
span{
height: 20px;
width: auto;
padding: 0 5px;
margin: 2px 10px;
line-height: 20px;
text-align: center;
border: 1px solid gold;
cursor: pointer;
}
</style>
</head>
<body>
<div class="clearfix" id="content"></div>
<script>
let allarr = ['a','b','c','d','e','f','g','h']
let query = document.getElementById('content');
let str='',dragItem,overItem;
for (let i=0;i<allarr.length;i++){
str +=`<span class="drapEle" draggable="true" >${allarr[i]}</span>`
}
query.innerHTML = str;
document.addEventListener("drag", function(e) {
dragItem = e.target.innerText;
});
document.addEventListener("dragover", function(e) {
if(dragItem !== overItem){
overItem = e.target.innerText;
}else {
overItem = '';
}
});
document.addEventListener("dragend", function(e) {
let orArr = [...allarr];
let dragindex = orArr.findIndex(item => item == dragItem);
let overindex = orArr.findIndex(item => item == overItem);
let reset1=[],reset2 = [];
if(dragindex!=-1 && overindex !=-1){
let dealArr = [];
if(dragindex > overindex){
dealArr = orArr.slice(overindex,dragindex+1);
let lastitem = dealArr.pop();
dealArr = [...[lastitem],...dealArr];
reset1 = orArr.slice(0,overindex);
reset2 = orArr.slice(dragindex+1)
};
if(dragindex < overindex){
dealArr = orArr.slice(dragindex,overindex+1);
let [fisrtitem,...resetarr] = dealArr;
dealArr = [...resetarr,...[fisrtitem]];
reset1 = orArr.slice(0,dragindex);
reset2 = orArr.slice(overindex+1)
};
allarr = [...reset1,...dealArr,...reset2];
str = '';
for (let i=0;i<allarr.length;i++){
str +=`<span class="drapEle" draggable="true" >${allarr[i]}</span>`
}
query.innerHTML = str;
}
});
</script>
</body>
</html>