javascript 拖拽事件，在拖动排序后如何保存拖拽后的位置？

Question

 <ul id="container" ondragover="allowDrop(event)" ondragstart="dragStart(event)" ondragend="dragEnd(event)">                         
    <li draggable="true">1</li>
    <li draggable="true">2</li>
    <li draggable="true">3</li>
    <li draggable="true">4</li>
    <li draggable="true">5</li>
    <li draggable="true">6</li>
    <li draggable="true">7</li>
    <li draggable="true">8</li>
    <li draggable="true">9</li>
    <li draggable="true">10</li>
</ul>

<script>
    var draging = null
    function dragStart(event) {    
        draging = event.target
        draging.classList.add('dashed');
        var div = document.createElement('div')
    }

    function allowDrop(event) {
        // 默认无法将数据/元素放置到其他元素中。如果需要设置允许放置，必须阻止对元素的默认处理方式
        event.preventDefault()
        var target = event.target
        if (target.nodeName === "LI" && target !== draging) {
            // 获取初始位置
            var targetRect = target.getBoundingClientRect()
            var dragingRect = draging.getBoundingClientRect()
            if (target) {
                // 判断是否动画元素
                if (target.animated) {
                    return;
                }
            }
            if (_index(draging) < _index(target)) {
                // 目标比元素大，插到其后面
                // extSibling下一个兄弟元素
                target.parentNode.insertBefore(draging, target.nextSibling)
            } else {
                // 目标比元素小，插到其前面
                target.parentNode.insertBefore(draging, target)
            }
        }
    }

    function dragEnd(event) {
        event.target.classList.remove('dashed');
        localStorage
        // console.log(document.getElementsByTagName('li'))
    }
    // 获取元素在父元素中的index
    function _index(el) {
        var index = 0
        if (!el || !el.parentNode) {
            return -1
        }
        // previousElementSibling：上一个兄弟元素
        while (el && (el = el.previousElementSibling)) {
            index++
        }
        return index
    }
</script>

在完成拖拽后，怎么能够保存当前位置呢？是需要保存到缓存中吗，具体如何操作，求教！！！

Answer 1

是拖动后，重新排序吗？

Answer 2

这个例子看看（执行右上角的 import draggable-polyfill）？http://xboxyan.codelabo.cn/dr...

可以参考这个仓库 https://github.com/XboxYan/dr...

Answer 3

怎么又是你？
在另一个问题里回答过了：

// 事实上我不会 ng，所以下面的写法是我猜测的，希望你能看懂，
// 然后以正确的方式写出来，index 是索引
<li draggable="true"
    (dragstart)="dragStart($event)"
    (dragend)="dragEnd($event)"
    class="card"
    *ngFor="let item of list"
    origin-index="{{index}}"
>
           {{item.name}}
   </li>

// 在你每次拖拽排序完成后
const newList = [].map.apply(
    target.parentNode,
    [i => list[i.getAttribute('origin-index')]]
)
// 缓存这个 newList

当然我还是推荐那个问题里我给的方案一，而不是这种方案。