拖动api练习

Author: windqyoung

_posts/2025-08-09-mdn-drag.md

@@ -0,0 +1,154 @@
+---
+title: 拖动API练习
+---
+
+
+
+<style>
+    .drag-ctx div {
+        border: 1px solid rgba(255, 0, 0, 0.2);
+    }
+
+    .drag-ctx {
+        display: flex;
+        gap: 16px;
+    }
+
+    .source-item {
+        width: 200px;
+        height: 100px;
+    }
+
+    .dropzone {
+        width: 200px;
+        height: 200px;
+
+    }
+
+    .dragging {
+        background: blue;
+    }
+
+    .msg {
+        flex: 1;
+        background-color: pink;
+        opacity: 0.9;
+        overflow: auto;
+        max-height: 50vh;
+    }
+</style>
+<div class="drag-ctx">
+
+    <div draggable="true" class="source source-item">可拖动的元素</div>
+
+    <div class="source-item">
+        选择拖动文本
+        <input type="text" value="选择拖动文本内容">
+    </div>
+
+    <div class="source-item">可拖动的图片
+        <img src="./logo.svg" width="100"/>
+    </div>
+
+    <div class="source-item">
+        <a href="https://www.baidu.com">可拖动地址</a>
+    </div>
+
+
+</div>
+
+<div class="drag-ctx">
+
+    <div class="dropzone">
+        目标放置
+    </div>
+
+    <div class="msg">
+
+    </div>
+</div>
+<script>
+    function log(text, ...data) {
+        let ele = document.createElement("div");
+        ele.textContent = JSON.stringify(data);
+
+        let tele = document.createElement("div");
+        tele.textContent = text;
+
+        let msg = document.querySelector('.msg')
+        msg.appendChild(tele);
+        msg.appendChild(ele)
+
+        msg.scrollTop = msg.scrollHeight;
+
+        console.log(text, ...data);
+    }
+
+    function show_data(event, title) {
+
+        console.log(title, event.dataTransfer);
+
+        let dt = event.dataTransfer;
+
+        for (let type of dt.types) {
+            log(`${title}数据获取`, type, dt.getData(type));
+        }
+        for (let item of dt.items) {
+            let file = item.getAsFile()
+            if (file) {
+                log(`${title}数据文件`, file, item)
+            } else {
+                item.getAsString((str) => {
+                    log(`${title}字符串`, str)
+                })
+            }
+
+        }
+
+    }
+
+    let source = document.querySelector('.source');
+    // 源开始
+    source.addEventListener('dragstart', e => {
+        e.target.classList.add('dragging');
+        let id = Math.random() + '.id'
+        e.dataTransfer.setData('text', id)
+        log('设置id', {id})
+    })
+
+    // 源开始, 频率太高, 不处理
+    source.addEventListener('drag', e => {
+    })
+
+    // 源结束
+    source.addEventListener('dragend', e => {
+        log("拖动完成?", e.dataTransfer.dropEffect);
+        e.target.classList.remove('dragging');
+
+
+        debugger
+        show_data(e, 'end')
+
+    })
+
+
+    let drope = document.querySelector('.dropzone');
+    drope.addEventListener('dragenter', e => {
+        e.preventDefault()
+        log('进入', e.dataTransfer.dropEffect);
+        e.target.classList.add('dragging');
+    })
+    drope.addEventListener('dragleave', e => {
+        e.target.classList.remove('dragging');
+        log('离开', e.dataTransfer.dropEffect);
+    })
+    drope.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+    })
+    drope.addEventListener('drop', (e) => {
+        e.preventDefault();
+        e.target.classList.remove('dragging');
+        show_data(e, 'drop')
+    })
+</script>