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

  • 10
 <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>


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

回复
阅读 527
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

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

你知道吗?

宣传栏