html5-drag和drop拖拽

DOCTYPE html>
<html lang="en">

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

    <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>111111li>
        <li>222222li>
        <li>333333li>
        <li>444444li>
        <li>555555li>
    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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

相关阅读:
13.Ansible.roles案例
UTM 坐标系
为什么不建议使用Python自带的logging？
java计算机毕业设计springboot+vue中国古诗词网站(源码+系统+mysql数据库+Lw文档）
图像的表示与通道数问题、读取并展示图片、cv2.imread(filename, flags=None)
设计模式-代理模式（Proxy）
MapReduce核心原理（下）
PHP笔记：时间日期
iOS自动化测试方案(三)：WDA+iOS自动化测试解决方案
多制式射频信号发生器信号源

原文地址：https://blog.csdn.net/adley_app/article/details/133459688