最简单的拖拽效果

html5中提供了drag的效果, 通过事件可以进行拖拽元素, 请看例子, 非常简单!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="div1" style="background-color: red; width: 200px; height: 200px"></div>
<div id="div2" style="background-color: yellow; width: 100px; height: 100px; margin-top: 100px;" draggable="true"></div>
</body>
</html>
<script>
window.onload = function(){
	var div1 = document.getElementById("div1");
	var div2 = document.getElementById("div2");
	
	div1.ondragover = function(e){
		e.preventDefault();
	}
	div1.ondragenter = function(){
		
	}
	div2.ondragend = function(){
		
	}
}
</script>

你可能感兴趣的:(拖拽)