<!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>Document</title> </head> <body> <img id="drag" style="width: 100px; height: 100px; background-color: gold;" draggable="true" ele-data="http://staging-teach.cdn.ireadabc.com/c37a3945121274a1f7d95717327539ec_l.mp4" src="http://staging-teach.cdn.ireadabc.com/f38f9928-c3bd-47f8-9ed1-43c0e03d2f30.png"></img> <div id="target" ondrop="handle_drop(event)" ondragover="handle_dragover(event)" style="position: absolute; top: 10px; right: 10px; width: 80px; height: 80px; background: #00ffff;"> </div> <script> var dragEl = document.getElementById("drag"); dragEl.ondragstart = function(e) { // 图片 // const dt = "http://staging-teach.cdn.ireadabc.com/f38f9928-c3bd-47f8-9ed1-43c0e03d2f30.png"; // e.dataTransfer.setData("text/plain", dt); // 音频 const dt = {url: "http://staging-teach.cdn.ireadabc.com/1c8694612563f4e2da707f1f6a37d066_l.mp3", name: "test.mp3"}; e.dataTransfer.setData("text/plain", JSON.stringify(dt)); // 视频 // const dt = {url: "http://staging-teach.cdn.ireadabc.com/c37a3945121274a1f7d95717327539ec_l.mp4", name: "视频.mp4"}; // e.dataTransfer.setData("text/plain", JSON.stringify(dt)); // 骨骼动画 // const dt = {"ske":{"url":"http://staging-teach.cdn.ireadabc.com/3d4a36b83aada60709771fbe15e2b6db.json","name":"飞鸟_ske.json"},"tex":{"url":"http://staging-teach.cdn.ireadabc.com/08a676a5f456634f9c6c90e9efd3c2ea.json","name":"飞鸟_tex.json"},"png":{"url":"http://staging-teach.cdn.ireadabc.com/874393ecf5e0cd42a09f5b34d48854d2.png","name":"飞鸟_tex.png"}}; // e.dataTransfer.setData("text/plain", JSON.stringify(dt)) } dragEl.drop = function(e) { e.dataTransfer.getData("text/plain"); } var target = document.getElementById('target') // target.ondragover = handle_dragover function handle_dragover(e) { e.preventDefault() } function handle_drop(e) { } </script> </body> </html>