拖放奥秘

时间:2022-07-28
本文章向大家介绍拖放奥秘，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
<!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>

随机文章
本站知识点必读
最近更新