const $box = document.querySelector('.box');let data = ['A', 'B', 'C', 'D'];let fragment = document.createdocumentFragment();let $li = document.createElement('li');const render = () => { while ($box.children.length > 0) { $box.removeChild($box.firstChild) } data.forEach((e, i) => { let $cloneLi = $li.cloneNode(); $cloneLi.innerHTML = e; $cloneLi.setAttribute('draggable', true); fragment.appendChild($cloneLi); $box.appendChild(fragment); });}const changeData = (fromValue, toValue) => { // fromIndex 原数据索引 let fromIndex = data.indexOf(fromValue); // 删除fromIndex data.splice(fromIndex, 1); // toIndex(注意在删除之后取) let toIndex = data.indexOf(toValue); // 在toIndex后插入源数据 data.splice(toIndex + 1, 0, fromValue);}render();$box.setAttribute('draggable', false);$box.addEventListener('dragstart', e => { let $currentLi = e.target; e.dataTransfer.setData('content', $currentLi.innerHTML);})$box.addEventListener('dragenter', e => { e.preventDefault(); })$box.addEventListener('dragover', e => { e.preventDefault(); })$box.addEventListener('drop', e => { let fromValue = e.dataTransfer.getData('content'); let toValue = e.target.innerHTML; changeData(fromValue, toValue) render();})
