关于利用HTML5和CSS3实现文档的拖拽的

最新推荐文章于 2023-05-23 10:05:10 发布

Lurkers.

最新推荐文章于 2023-05-23 10:05:10 发布

阅读量288

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/this_name_true/article/details/82661744

版权

本文介绍如何使用HTML5和CSS3的拖放API来实现文档的拖拽功能，通过代码示例展示了具体实现过程，帮助读者理解这一现代网页技术的应用。

摘要由CSDN通过智能技术生成

效果图如下：

代码如下：

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖拽东西进来</title>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<style>
			
			.finger{
				width: 200px;
				height: 200px;
				background: deepskyblue;
				margin-left: 600px;
				margin-top: 200px;
			}
		</style>
	</head>
	<body>
		<div class="drag" ></div>
		<div class="finger" id="finger"></div>
		
		<script>
			var oDrag=document.getElementsByTagName("div")[0];
			var oFinger=document.getElementById("finger");
			
				
				//1.文件进入
				oFinger.ondragenter=function(){
					this.innerHT