今天来说说html5的拖拽

最新推荐文章于 2023-08-21 08:49:42 发布

AXinBYZ

最新推荐文章于 2023-08-21 08:49:42 发布

阅读量362

点赞数 1

分类专栏： html5 文章标签： html5 拖拽

本文链接：https://blog.csdn.net/AXinBYZ/article/details/52934315

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

先看demo

相关知识点：

dataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer；

draggable:给拖拽元素的draggable属性设置成true；表示该元素可以进行拖拽了；

ondragstart事件：拖拽元素开始拖拽的时候触发的；

ondragover事件：拖拽元素在目标元素上移动的时候触发，作用在目标元素上；

ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，作用在目标元素上；

ondrop事件：拖拽元素在目标元素上松开鼠标时触发，作用在目标元素上；

ondragend事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上。

代码部分：

css:

<style>
	.box{
		width:100px;
		height: 100px;
		border:1px solid #aaa;
		padding:10px;
		float: left;
		margin-right: 20px;
	}
	#odiv{
		width: 100px;
		height: 100px;
		background: red;
	}
</style>

html:

<body>
	<div id="box1" class="box">
		<div id="odiv" draggable="true"></div>
	</div>
	<div id="box2" class="box">
		
	</div>
</body>

js:

<script>
	function getId(id){
		return document.getElementById(id);
	}
	odiv = getId("odiv");
	box1 = getId("box1");
	box2 = getId("box2");
	//在目标对象上绑定函数
	odiv.οndragstart=function(ev){
		drag(ev);
	}
	box2.οndrοp=function(ev){
		drop(ev);
	}
	box2.οndragοver=function(ev){
		allwoDrop(ev);
	}
	box1.οndrοp=function(ev){
		drop(ev);
	}
	box1.οndragοver=function(ev){
		allwoDrop(ev);
	}
	/*定义作用于拖拽对象上的拖拽函数*/
	//dataTransfer  用于拖拽的中间媒介
	function drag(ev){
		ev.dataTransfer.setData("Text",ev.target.id);
		return true;
	}

	/*在目标对象上的移动函数*/
	function allwoDrop(ev){
		ev.preventDefault();//阻止默认事件
	}

	/*允许放下的函数*/
	function drop(ev){
		ev.preventDefault();
		var data = ev.dataTransfer.getData("Text");
		ev.target.appendChild(document.getElementById(data));
	}
</script>