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包裝過，不是原生的。