标签：util add default style ssl 传递 event asc agg
dataTransfer 对象，它是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .drag{ 8 width: 50px; 9 height: 50px; 10 position: absolute; 11 background: red; 12 } 13 .drop{ 14 width: 100px; 15 height: 100px; 16 position: fixed; 17 bottom: 50px; 18 right: 50px; 19 border: 1px solid black; 20 } 21 .dotted-border{ 22 border: 1px dotted black; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="drag" draggable="true" id=‘box‘></div> 28 <div class="drop"></div> 29 <script src="js/utils.js" type="text/javascript"></script> 30 <script type="text/javascript"> 31 /* 32 * 1.拖放的元素:ondragstart,ondrag,ondragend,只有图片，文字，超链接默认是支持拖放，一个元素是否支持拖放取决于dragable 33 * 2.拖放的目标:ondragenter,ondragover,ondragleave,ondrop,一般元素默认都不支持放，如果要支持放，重写ondrageenter,ondragover,FF还需要重写ondrop,在这些事件函数 34 * 中阻止默认行为 35 * 3. 36 */ 37 var oDrag=document.querySelector(".drag"); 38 var oDrop=document.querySelector(".drop"); 39 //拖动元素时需要执行的 40 oDrag.ondragstart=function(){ 41 var event=getEvent(); 42 this.classList.add(‘dotted-border‘); 43 event.dataTransfer.setData(‘id‘,‘box‘); 44 } 45 oDrag.ondrag=function(){ 46 47 } 48 oDrag.ondragend=function(){ 49 50 } 51 //将元素放到某个特定位置时 52 oDrop.ondragenter=function(){ 53 var event=getEvent(); 54 preventDefault(event); 55 } 56 oDrop.ondragover=function(){ 57 var event=getEvent(); 58 preventDefault(event); 59 } 60 oDrop.ondragleave=function(){ 61 62 } 63 oDrop.ondrop=function(){ 64 var event=getEvent(); 65 preventDefault(event); 66 67 //把拖放的元素放到这里 68 var id=event.dataTransfer.getData(‘id‘); 69 var oBox=document.getElementById(id); 70 var clone=oBox.cloneNode(true); 71 this.appendChild(clone); 72 } 73 </script> 74 </body> 75 </html>
标签：util add default style ssl 传递 event asc agg
原文地址：http://www.cnblogs.com/crbluesky/p/7658349.html
