html5-drag和drop拖拽

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        ul {
            width: 1000px;
            height: 200px;
            background: palegreen;
        }

        main {
            border: 2px solid #333;
            height: 300px;
            width: 1200px;
        }
    </style>
</head>

<body>

    <ul id="oriDiv" draggable="true">
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
        <li>555555</li>
    </ul>

    <main id="main"></main>
    <script>
        oriDiv.ondragstart = function () {
            console.log('drag start')
        }

        main.ondragenter = function () {
            console.log('drag enter')
        }

        main.ondragleave = function () {
            console.log('drag leave')
        }


        main.ondragover = function (e) {
            e.preventDefault()
            console.log('drag over')
        }

        // @WARN:使用drop时注意,需要首先将drop事件的前一个事件dragover的浏览器默认操作禁止,
        // 才可以触发drop事件。 
        main.ondrop = function () {
            console.log('drop ...')
        }

        /**
         * source
         */
        oriDiv.ondragstart = (e) => {
            console.log('clearing data ...')
            e.dataTransfer.cleanData()
            console.log('setting data ...')
            e.dataTransfer.setData('name', JSON.stringify({ name: 'xiaoming' }))
        }

        /**
         * target
         */
        main.ondragover = (e) => {
            e.preventDefault()
        }

        main.ondrop = (e) => {
            console.log('getting data ...')
            data = JSON.parse(e.dataTransfer.getData('name'))
            console.log(data.name)
        }

        /**
         * Example code
         */
        const img = document.querySelectorAll('img')
        const des = document.querySelectorAll('div')

        for (let i = 0; i < des.length; i++) {
            img[i].ondragstart = (e) => {
                e.dataTransfer.setData('id', e.target.id)
            }
            des[i].ondragover = (e) => {
                e.preventDefault()
            }

            des[i].ondrop = (e) => {
                const id = e.dataTransfer.getData('id')
                this.appendChild(document.getElementById(id))
            }
        }
    </script>
</body>

</html>
相关推荐
rising start2 分钟前
前端基础一、HTML5
前端·html·html5
Never_Satisfied10 分钟前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
鬼谷中妖11 分钟前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A15 分钟前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER17 分钟前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父21 分钟前
前端速通—CSS篇
前端·css
pixle024 分钟前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf198730 分钟前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH30 分钟前
WHAT - 前端性能指标(加载性能指标)
前端
尘世中一位迷途小书童35 分钟前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源