首页 > 代码库 > 拖拽到指定位置

拖拽到指定位置

2024-07-12 07:33:13   220人阅读

 

<!-- 全屏 拖拽-->

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>


联系
我们