HTML5 拖放API的使用

最新推荐文章于 2024-04-03 08:57:23 发布

ayangjing

最新推荐文章于 2024-04-03 08:57:23 发布

阅读量1.3k

点赞数

分类专栏： html5+css3

本文链接：https://blog.csdn.net/ayangjing/article/details/11305263

版权

html5+css3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.实现拖放的步骤

1）将想要拖放的对象元素的draggable属性设为true.这样才能将该元素进行拖放。另外，img元素与a元素(必须指定href)默认允许拖放。

2）编写与拖放有关的事件处理代码。关于拖放存在如下几个事件。

事件	产生事件的元素	描述
dragstart	被拖放的元素	开始拖放操作
drag	被拖放的元素	拖放过程
dragenter	拖放过程中鼠标经过的元素	被拖放的元素开始进入本元素的范围内
dragover	拖放过程中鼠标经过的元素	被拖放的元素正在本元素的范围内移动
dragleave	拖放过程中鼠标经过的元素	被拖放的元素离开本元素的范围
drop	拖放的目标元素	有其他元素被拖放到了本元素中
dragend	拖放的目标元素	拖放操作结束

下面代码清单给出了一个按照上述步骤实现的拖放示例。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
   
    </style>
    <script>
	function init(){
		var source = document.getElementById('dragme');
		var dest = document.getElementById('text');
		//拖放开始
		source.addEventListener('dragstart',function(ev){
			//向dataTransfer对象追加数据
			var dt = ev.dataTransfer;
			console.log(dt.types);
			dt.effectAllowed ="all";
			dt.setData('aa','你好');
		},false);
		//拖放结束
		dest.addEventListener('dragend',function(ev){
			//不执行默认处理(拒绝被拖放)
			ev.preventDefault();
		},false);
		//被拖放
		dest.addEventListener('drop',function(ev){
			//从DataTransfer对象那里取得数据
			var dt = ev.dataTransfer;
			var text = dt.getData('aa');
			dest.textContent += text;
			//不执行默认处理(拒绝被拖放)
			ev.preventDefault();
			//停止事件传播
			ev.stopPropagation();
			ev.target.appendChild(source);
		},false);
	}
    //页面不执行默认事件
	document.ondragover = function(e){e.preventDefault();}
	document.ondrop = function(e){e.preventDefault();}
    </script>
  </head>
  <body οnlοad="init()">
	<div id="dragme" draggable="true" style="width:200px;border:1px solid gray">
		请拖放
	</div>
	<div id="text" style="width:200px;height:200px;border:1px solid gray">
	</div>
  </body>
</html>

下面把上例代码中的几个知识要点解释一下：

1> 开始拖动(dragstart事件发生)时，把要拖动的数据存入DataTransfer对象(setData()方法)。DataTransfer对象专门用来存放拖放时要携带的数据，他可以被设置为拖动事件对象的dataTransfer属性。setData方法中的第一个参数为携带数据的数据种类的字符串，第二个参数为要携带的数据。

2>针对拖放的目标元素，必须在dragend或dragover事件内调用“事件对象.preventDefault()”方法。因为默认情况下，拖放的目标元素是不允许接受元素的，为了把元素拖放的其中，必须把默认的处理给关闭掉。

3>目标元素接受到被拖放的元素后，执行getData()方法从DataTransfer那里获得数据。getData()方法的参数为setData()方法中指定的数据类型，本例中为“text/plain”。

4>要实现拖放过程，还必须在目标元素的drop事件中关闭默认处理，否则目标元素不能接受被拖放的元素。

5>要实现拖放过程，还必须设定整个页面为不执行默认处理,负责拖放处理也不能被实现。因为页面是先于其他元素接受拖放的，如果页面上拒接拖放，那么页面上其他元素就都不能接受拖放了。

ayangjing

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5 拖放API的使用

1.实现拖放的步骤1）将想要拖放的对象元素的draggable属性设为true.这样才能将该元素进行拖放。另外，img元素与a元素(必须指定href)默认允许拖放。2）编写与拖放有关的事件处理代码。关于拖放存在如下几个事件。事件产生事件的元素描述dragstart被拖放的元素开始拖放操作
复制链接

扫一扫