拖放奥秘

<!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{
    
    margin: 0;padding: 0;list-style: none;}

#div1{
    
    
	width: 200px;height: 200px;background: black;position: absolute;left: 50%;top: 50%;
	margin: -100px 0 0 -100px;
}

    </style>
</head>
<body>
<div id='div1'></div>
<script type="text/javascript">
	
div1.ondragenter = function(){
    
    
	document.body.style.background='yellow';
};

div1.ondragleave = function(){
    
    
	document.body.style.background='white';
}

</script>
</body>
</html>

<!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{
    
    margin: 0;padding: 0;list-style: none;}

#div1{
    
    
	width: 200px;height: 200px;background: black;position: absolute;left: 50%;top: 50%;
	margin: -100px 0 0 -100px;
}

    </style>
</head>
<body>
<div id='div1'></div>
<script type="text/javascript">
	
div1.ondragenter = function(){
    
    
	document.body.style.background='yellow';
};

div1.ondragleave = function(){
    
    
	document.body.style.background='white';
}
var a=0;
div1.ondragover=function()//进入的事件.
{
    
    
	a++;
	document.title=a;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{
    
    margin: 0;padding: 0;list-style: none;}

#div1{
    
    
	width: 200px;height: 200px;background: black;position: absolute;left: 50%;top: 50%;
	margin: -100px 0 0 -100px;
}

    </style>
</head>
<body>
<div id='div1'></div>
<script type="text/javascript">
	
div1.ondragenter = function(){
    
    
	document.body.style.background='yellow';
};

div1.ondragleave = function(){
    
    
	document.body.style.background='white';
}
var a=0;
div1.ondragover=function()//进入的事件.
{
    
    
	a++;
	document.title=a;
}
div1.ondrop=function()//拖动元素放到div中启动事件
{
    
    
	alert(1);
	return false;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{
    
    margin: 0;padding: 0;list-style: none;}

#div1{
    
    
	width: 200px;height: 200px;background: black;position: absolute;left: 50%;top: 50%;
	margin: -100px 0 0 -100px;
}

    </style>
</head>
<body>
<div id='div1'></div>
<div>
	<span>文件名:<span id="textName"></span></span><br>
	<span>大小:<span id="textSize"></span></span>
</div>
<script type="text/javascript">
	
div1.ondragenter = function(){
    
    
	document.body.style.background='yellow';
};

div1.ondragleave = function(){
    
    
	document.body.style.background='white';
}
var a=0;
div1.ondragover=function()//进入的事件.
{
    
    
	a++;
	document.title=a;
	return false;
}
div1.ondrop=function(e)//拖动元素放到div中启动事件
{
    
    
	var oFile=e.dataTransfer.files[0];//e.dataTransfer通谷一点讲，就是可以通过它来传输被拖动的数据，以便在拖拽结束的时候，对数据进行其他的操作。
	textName.innerHTML=oFile.name;
	textSize.innerHTML=oFile.size;
	return false;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{
    
    margin: 0;padding: 0;list-style: none;}

#div1{
    
    
	width: 200px;height: 200px;background: black;position: absolute;left: 50%;top: 50%;
	margin: -100px 0 0 -100px;
}

    </style>
</head>
<body>
<div id='div1'></div>
<div>
	<span>文件名:<span id="textName"></span></span><br>
	<span>大小:<span id="textSize"></span></span>
</div>
<script type="text/javascript">
	
div1.ondragenter = function(){
    
    
	document.body.style.background='yellow';
};

div1.ondragleave = function(){
    
    
	document.body.style.background='white';
}
var a=0;
div1.ondragover=function()//进入的事件.
{
    
    
	a++;
	document.title=a;
	return false;
}
div1.ondrop=function(e)//拖动元素放到div中启动事件
{
    
    
	var oFile=e.dataTransfer.files[0];//e.dataTransfer通谷一点讲，就是可以通过它来传输被拖动的数据，以便在拖拽结束的时候，对数据进行其他的操作。
	textName.innerHTML=oFile.name;
	textSize.innerHTML=oFile.size;
	var reader=new FileReader();
	reader.readAsBinaryString(oFile);//转换为二进制
	return false;
}
</script>
</body>
</html>

猜你喜欢