基于html5的拖拽(及基于html4的拖拽)-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_3742/article/details/82611309

本文介绍了如何使用HTML5实现元素的拖拽功能，并通过示例展示了两种不同的拖拽方式：一种是在HTML5标准下利用拖放API实现元素从一个容器到另一个容器的拖拽；另一种则是基于HTML4通过鼠标事件实现简单的元素拖动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>基于html5的拖拽</title>
		<style>
			*,html,body{border:0;margin:0;padding:0;width:100%;height:100%}
			div{
				width:150px;height:200px;background:#ABCEDF;float:left;
			}
			h4{
				width:150px;height:40px;text-align:center;vertical-align:middle;line-height:40px;
			}
			h4:hover{
				width:146px;height:36px;background:yellow;border:2px solid #ABCEDF;cursor:pointer
			}
			span{
				width:150px;height:200px;background:#FEDCBA;float:right;
			}
		</style>
	</head>
	<body>
		<div>
			<h4>拖拽一</h4>
			<h4>拖拽二</h4>
			<h4>拖拽三</h4>
			<h4>拖拽四</h4>
			<h4>拖拽五</h4>
		</div>
		<span>
		</span>
		<script>
		window.onload = function(){
			var div = document.getElementsByTagName("div")[0];
			var span = document.getElementsByTagName("span")[0];
			var h4s = div.childNodes;
			for(i=0;i<h4s.length;i++){
				var h4 = h4s[i];
				h4.draggable = true;	//使h4可拖拽
				/*以下是h4的拖拽事件*/
				h4.ondragstart = function(e){
					console.log("开始"+this.innerHTML);
					e.dataTransfer.setData("Text",this.innerText);
					console.log(e);
					var h4 = e.target;
					h4.flag = true;
				}
				h4.ondrag = function(e){
					console.log("移动"+this.innerText);
				}
				h4.ondragend = function(e){
					console.log("结束"+this.innerHTML);
					var h4 = e.target;
					h4.flag = false;
				}
			}
			
			/*以下方法用于实现h4放入span中*/
			span.ondragenter = function(e){
				e.preventDefault();	//阻止默认事件
				console.log(e.dataTransfer.getData("Text")+"进入");
			}
			span.ondragover = function(e){
				e.preventDefault();	//阻止默认事件
				console.log("悬浮");
			}
			span.ondragleave = function(e){
				e.preventDefault();	//阻止默认事件
				console.log("离开");
			}
			span.ondrop = function(e){
				e.preventDefault(); //阻止默认事件
				var h4s = div.childNodes;
				for(var j=0;j<h4s.length;j++){
					if(h4s[j].flag==true){
						//var span = e.target;
						//var span = this;
						span.appendChild(h4s[j]);
					}
				}
				console.log(e.dataTransfer.getData("Text")+"落下");
			}
			
			/*以下方法用于实现h4放入div中*/
			div.ondragenter = function(e){
				//e.preventDefault();
			}
			div.ondragover = function(e){
				e.preventDefault();
			}
			div.ondragleave = function(e){
				//e.preventDefault();
			}
			div.ondrop = function(e){
				e.preventDefault();
				var h4s = span.childNodes;
				for(var k=0;k<h4s.length;k++){
					if(h4s[k].flag==true){
						div.appendChild(h4s[k]);
					}
				}
			}
		}
		</script>
	</body>
</html>

基于html4的拖拽：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
	<head>
		<meta charset="utf-8"/>
		<title>基于html4的拖拽</title>
		<style>
			#drag{
				width:100px;height:100px;background:#ABCDEF;position:absolute;
				display:block;float:left;
				text-align:center;vertical-align:middle;line-height:100px;
				cursor:pointer;
			}
		</style>
	</head>
	<body>
		<div id="drag">
			请拖拽我
		</div>
		<script>
			window.onload = function(){
				var drag = document.getElementById("drag");
				drag.onmousedown = function(){
					drag.onmousemove = function(e){
						//console.log(e.clientX+"-"+drag.style.width);
						drag.style.left = (e.clientX - 50)+"px";
						drag.style.top = (e.clientY - 50)+"px";
					}
				}
				drag.onmouseup = function(e){
					drag.style.left = (e.clientX - 50)+"px";
					drag.style.top = (e.clientY - 50)+"px";
					drag.onmousemove = null;
				}
			}
		</script>
	</body>
</html>