zoukankan      html  css  js  c++  java
  • 拖拽到指定位置

    <!-- 全屏 拖拽-->

    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;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 ojasMy DocumentsMy Picturesdownload.ico" draggable="true" ondragstart="drag(event)" /> 54 55 </body> 56 </html>
  • 相关阅读:
    静态检查lua语法工具luacheck
    centos7系列:
    git submodule 教程
    CENTOS 7 安装redis
    python基本语法:
    彻底理解lib和dll
    C++语言的设计与演化(空白):
    《Effective C++》 目录:
    C++进阶书籍(转)
    学习的心态(转)
  • 原文地址:https://www.cnblogs.com/rojas/p/3848514.html
Copyright © 2011-2022 走看看