Ticker

6/recent/ticker-posts

Ad Code

Responsive Advertisement

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

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


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

Enregistrer un commentaire

0 Commentaires