拖拽到指定位置
<!-- 全屏 拖拽-->
div不奏效，不知道是不是HTML5不支持.
IMG图片ok
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style type="text/css"> 5 html{background-color:white; height:100%;}
<!-- 全屏 拖拽-->
6 body{background-color:#eee; height:100%; margin:0px;} 7 </style> 8 9 <script type="text/javascript"> 10 function allowDrop(ev) 11 { 12 ev.preventDefault(); 13 } 14 15 function drag(ev) 16 { 17 ev.dataTransfer.setData("Text",ev.target.id); 18 } 19 20 function drop(ev) 21 { 22 ev.preventDefault(); 23 var data=ev.dataTransfer.getData("Text"); 24 ev.target.appendChild(document.getElementById(data)); 25 //alert(data); 26 var obj=document.getElementById(data); 27 droppoint(ev,obj); 28 } 29 30 function droppoint(e,obj){ 31 var x=""+event.clientX+"px"; 32 var y=""+event.clientY+"px"; 33 pset(x,y,obj); 34 } 35 36 function pset(left,top,obj){ 37 obj.style.position = "absolute"; 38 obj.style.left = left; 39 obj.style.top = top; 40 } 41 42 </script> 43 </head> 44 45 <body ondrop="drop(event)" ondragover="allowDrop(event)"> 46 47 <div align="center" style="top:200px;font-size:50px">drag and drop</div> 48 <!-- 49 <div id="drag1" style="position:absolute;width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;background-color:green;" draggable="true" ondragstart="drop(event)" ></div> 50 --> 51 52 <!-- --> 53 <img id="drag2" src="C:\Documents and Settings\rojas\My Documents\My Pictures\download.ico" draggable="true" ondragstart="drag(event)" /> 54 55 </body> 56 </html>
