用原生js实现简单的拖拽和拖放操作

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    main {
      width: 100vh;
      height: 100vh;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .draggable-container {
      flex: 1;
    }

    .draggable {
      width: 200px;
      height: 200px;
      background-color: #00d9ff;
    }

    .droppable {
      flex: 1;
      width: 300px;
      height: 300px;
      border: 8px dashed #00d9ff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .droppable::before {
      display: block;
      content: '请拖放到此区域';
    }

    .dragover {
      border: 8px dashed #ffae00;
    }

    .dropped {
      border: 8px dashed #48ff00;
    }

    .dropped::before {
      z-index: -1;
    }

    .droppable img {
      width: 200px;
      height: 200px;
    }
  style>
head>

<body>
  
  <main>
    <div class="draggable-container">
      
      
      
      <img id='draggable' class="draggable" draggable="true" src="./成都区域划分图.jpeg">img>
    div>
    <div id="droppable" class="droppable">div>
  main>
  <script>
    const draggable = document.querySelector('#draggable');
    const droppable = document.querySelector('#droppable');

    /* 在拖拽开始的时候，对拖拽元素进行监听,将其信息利用事件对象中的dataTranfe进行设置 */
    draggable.addEventListener('dragstart', handleDragStart);
    function handleDragStart(e) {
      e.dataTransfer.setData('text/plain', e.target.id);
    }

    /* 当拖拽元素经过放置元素的时候，对放置元素进行监听，将其边框颜色改变 */
    droppable.addEventListener('dragover', handleDragover);
    function handleDragover(e) {
      e.preventDefault();
      droppable.classList.add('dragover')
    }

    /* 当拖拽元素离开的时候，对放置元素进行监听，将其边框置为原来的颜色 */
    droppable.addEventListener('dragleave', handleDragLeave);
    function handleDragLeave() {
      droppable.classList.remove('dragover');
    }

    /* 拖拽元素放置时，将拖拽的元素追加到放置区域 */
    droppable.addEventListener('drop', handleDrop);
    function handleDrop(e) {
      e.preventDefault();
      // const draggedId = e.dataTransfer.getData('text/plain');
      // droppable.appendChild(document.getElementById(draggedId));
      droppable.classList.add('dropped');
      [...e.dataTransfer.items].forEach(item => {
        if (item.kind === 'file') {
          const file = item.getAsFile();
          createPreview(file);
        }
      })
    }

    /* 当拖拽元素为图片时：进行的处理 */
    function createPreview(imageFile) {
      if (!imageFile.type.startsWith('image/')) {
        return;
      }
      const image = document.createElement('img');
      image.src = URL.createObjectURL(imageFile);
      image.onload = function () {
        URL.revokeObjectURL(this.src);
      }
      droppable.appendChild(image);
    }
  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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

相关阅读:
287. 寻找重复数
redis持久化之RDB
80端口映射外网方法
前端vue实现目录锚点跳转及滚动到指定内容区域(带源码)
〖Python 数据库开发实战 - MySQL篇㉒〗- 子查询的语法规则
声网 VQA：将实时互动中未知的视频画质用户主观体验变可知
Selenium自动化测试 —— 通过cookie绕过验证码的操作！
IDEA2023 常用配置（JDK/系统设置等常用配置）
【14】基础知识：React - redux
pytorch基础学习（1）

原文地址：https://blog.csdn.net/yangyanqin2545/article/details/126489303