- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

js拖动（一个完整的案例呈现）

陈业贵发表于 2021/12/14 23:48:09 2021/12/14

【摘要】 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name...

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin:0px;}
		#div1
		{
			width: 200px;
			height: 200px;
			background: red;position: absolute;
			left: 50%;top: 50%;margin: -100px 0 0 -100px;
		}
		#div2
		{
			position: absolute;
			bottom: 0;height: 60px;
			background: -moz-linear-gradient(left,red,green);
			width: 0%;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div id="div1"></div>
	<div>
		<span>文件名:<span id="textName"></span></span><br>
		<span>大小:<span id="textSize"></span></span>
	</div>
	<adiv id="div2"></adiv>
	<script type="text/javascript">
		div1.ondragenter=function()
		{
			document.body.style.background="yellow";
		};
		div1.ondragleave=function()
		{
			document.body.style.background="white";
		};
		//以上拖动文件到div1中发生的颜色问题.
		var a=0;
		div1.ondragover=function()//拖动文件到目标时触发.
		{
			a++;
			document.title=a;
			return false;
		}
		//以上是title哪里的累加事情.
		div1.ondrop=function(e)//拖动文件到目标时触发.
		{
			var oFile=e.dataTransfer.files[0];
			textName.innerHTML=oFile.name;
			textSize.innerHTML=oFile.size;
			var reader=new FileReader();
			reader.readAsBinaryString(oFile);
			reader.onprogress=function(e)
			{
				div2.style.width=parseInt(e.loaded/e.total*100)+"%";
				if(e.loaded==e.total)
				{
					alert("恭喜你.上传成功了");
					div2.style.width=0;
				}
			}
			return false;
		}
	</script>
</body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71