HTML5 拖拽用法

实现 html5 中不同 li 拖放后并排序的效果

image.png

如果是向外拖动自动放入最后一排，如果移动到另外一个 li 上则两者交换位置

image.png

css部分代码
···

<style>
    body {
        background: #eee;
    }

    /* Prevent the text contents of draggable elements from being selectable. */
    [draggable] {
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        /* Required to make elements draggable in old WebKit */
        -khtml-user-drag: element;
        -webkit-user-drag: element;
    }

    ul {
        width: 100vw;
        max-width: 500px;
        /* height: 300px; */
        border: 1px solid #ccc;
        border-radius: 8px;
        background: #fff;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

    }

    li {
        transition: all 0.3s;
        list-style: none;
        width: 100px;
        height: 160px;
        margin: 10px;
        background-color: rgb(177, 221, 250);
        border-radius: 4px;
    }

    .ondrag {
        transform: scale(0.8);
    }

    .ondragover {
        transform: scale(1.1);
        opacity: 0.8;
    }


    #box {
        width: 500px;
        /* height: 300px; */
        border: 1px solid #000;
    }
</style>

···

html 部分

   <ul id="list">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <button onclick="getLocation()">当前元素顺序</button>
    <div id="msg"></div>

javascript 部分

   <script>

        const $ = (e) => document.querySelector(e)
        const $$ = (e) => document.querySelectorAll(e)

        // 给所有li元素添加可拖动属性draggable
        const list = $('#list')
        const lis = $$('#list li')
        lis.forEach((e, k) => {
            e.draggable = true
            e.dataset.key = k
        })


        // 所有li元素注册拖动事件并设置数据
        for (let i of lis) {
            i.ondragstart = (e) => {
                e.dataTransfer.effectAllowed = 'move';
                let key = e.currentTarget.dataset.key;
                e.dataTransfer.setData("li_key", key); // 设置被拖数据的数据类型和值

                e.target.classList.add('ondrag');
            }

            i.ondragover = (e) => {
                e.target.classList.add('ondragover');
            }
            i.ondragleave = (e) => {
                e.target.classList.remove('ondragover');
            }
        }

        // 在#list中注册 可放置被拖动的数据   默认的拖动数据不可放置,所以要阻止默认事件
        list.ondragover = e => {
            e.preventDefault()
            e.dataTransfer.dropEffect = 'move'
            return false
        }


        list.ondrop = e => {
            if (e.stopPropagation) {
                e.stopPropagation(); // stops the browser from redirecting.
            }
            e.preventDefault()
            const element = GetElement(e)
            console.log(e.toElement, e.toElement === list, e.toElement === e.fromElement);


            if (e.toElement === list) { // 放置在#list上,追加到最后
                e.target.appendChild(element)
                return
            }


            // 放置在其他li元素上,两者位置交换
            const b = e.toElement
            const sa = element.nextSibling === b ? element : element.nextSibling
            b.parentNode.insertBefore(element, b)
            element.parentNode.insertBefore(b, sa)

        }

        function GetElement(e) {
            const key = e.dataTransfer.getData('li_key')
            for (let i of lis) {
                i.classList.remove('ondrag');
                i.classList.remove('ondragover');
            }
            for (let i of lis) {
                if (i.dataset.key === key) return i
            }
        }


        function getLocation() {
            console.log($$('#list li'));
            const vv = $$('#list li')
            const msg = $('#msg')
            let t = ''
            for (let i of vv) {
                t += i.innerHTML
            }
            msg.innerHTML = t

        }

    </script>

image.png