关于HTML5拖放中dataTransfer.setData()的问题。-优快云博客

本文探讨了在HTML5拖放功能中遇到的问题，特别是在使用`dataTransfer.setData()`时，指出当事件处理函数中的'e'参数被jQuery包装后，需要正确处理以确保设置数据的正确性。参考链接：https://www.cnblogs.com/hoganhz/p/6023102.html

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge" >
 6     <meta name="renderer" content="webkit" >
 7     <title>index</title>
 8     <script type="text/javascript" src="js/jquery2.0.0.min.js"></script>
 9     <style>
10         .ListRight a{
11             width: 244px;
12             height: 38px;
13             border: 1px solid #e3e3e3;
14             display: block;
15             line-height: 36px;
16             text-align: center;
17             color: #333333;
18         }
19 
20         .clearAll {
21             width: 300px;
22             height: 40px;
23             margin-top: 20px;
24             border: 1px solid #000;
25         }
26         .dragEvent {
27             width: 838px;
28             height: 70px;
29             background-color: #7ED321;
30             border-radius: 3px;
31             margin: 4px;
32         }
33     </style>
34     <script type="text/javascript">
35         $(function () {
36 
37             //开始
38             $('.ListRight a').on('dragstart', function (e) {
39                 e.dataTransfer.setData('text','Hello World');
40             });
41             //进入目标元素
42             $('.EventArea').on('dragenter', function (e) {
43                 e.preventDefault();
44             });
45             //在目标元素上移动
46             $('.EventArea').on('dragover', function (e) {
47                 e.preventDefault();
48             });
49             //移出目标元素
50             $('.EventArea').on('dragleave', function () {
51             });
52 
53             //被拖拽元素被放置在目标元素上
54             $('.EventArea').on('drop', function (e) {
55                 //阻止默认行为
56                 e.preventDefault();
57                 //阻止默认行为
58                 e.stopPropagation();
59                 $(this).append('<div class="dragEvent"> ' + e.dataTransfer.getData('text') + ' </div>');
60             });
61 
62             //拖拽结束
63             $('.ListRight a').on('dragend', function (e) {
64             });
65         })
66     </script>
67 </head>
68 <body>
69 
70 
71 <div class="ListRight">
72     <a draggable="true" href="#">顺序执行</a>
73     <a draggable="true" href="#">条件执行</a>
74     <a draggable="true" href="#">顺序执行</a>
75 </div>
76 
77 <div class="clearAll">
78 
79 </div>
80 </body>
81 </html>

上面是错的演示

需要将

e.dataTransfer.setData('text','Hello World');

改成

e.originalEvent.dataTransfer.setData('text',‘Hello World’);

function (e) { e.dataTransfer.setData('text','Hello World'); 40 }

中的e是被jquery包装过，不是原生的。

转载于:https://www.cnblogs.com/hoganhz/p/6023102.html