HTML5学习笔记（五）拖拽操作

一、拖拽效果

要拖拽的文件是什么? - 源元素

要拖拽到哪里去? - 目标元素

目前实现拖拽效果的方法

使用原生DOM就能实现 - 最麻烦

使用jQuery的插件 - 拖拽效果

HTML5中提供的拖拽功能

二、HTML5中拖拽

源元素事件

dragstart - 当鼠标开始拖放时被触发

drag - 当鼠标拖放过程中,类似于mousemove事件

dragend - 当鼠标结束拖放时被触发

目标元素事件

dragenter - 当鼠标拖放进入到目标元素内被触发

dragover - 当鼠标到达目标元素被触发

为该事件增加event.preventDefault();

drop - 当鼠标实现拖放效果时被触发

默认情况下,该事件没有被触发

原因 - HTML页面默认情况下,不允许拖放，称之为HTML页面的默认行为

解决 - 阻止页面的默认行为，事件对象event.preventDefault()方法

dragleave - 当鼠标拖放离开目标元素被触发

dataTransfer对象

作用 - 类似于window系统的剪切板的功能

功能：可以将源元素的信息(数据),存储在这里将存储在该对象的源元素信息,

提供给目标元素

方法

setData() - 设置(源元素)数据,在源元素事件中使用

getData() - 获取设置的数据,在目标元素事件中使用

clearData() - 清除(设置的)数据,所有的数据内容,存储在浏览器内存中

当使用完毕数据内容时,清除

setDragImage()方法

作用 - 修改拖放过程中,鼠标跟随的图片效果

用法 - drag、dragstart等事件

注意 - 实际操作中,该方法几乎不用

三、实例

<!DOCTYPE html>
<html>
 <head>
  <title>HTML5中的拖放效果</title>
  <meta charset="utf-8" />
  <style>
	#d1 {
		width : 300px;
		height : 300px;
		border : solid 1px black;
		float : left;
	}
	#d2 {
		width : 300px;
		height : 300px;
		border : solid 1px black;
		float : right;
	}
  </style>
 </head>

 <body>
  <!-- 源元素 -->
  <div id="d1">
	<img id="myimg" src="Penguins.jpg" width="256" />
  </div>
  <!-- 目标元素 -->
  <div id="d2"></div>
  <script>
	/*
	 * 使用HTML5中的拖放API实现拖放功能
	 * * 源元素事件 - dragstart事件
	 * * 目标元素事件 - drop和dragover事件
	 * * dataTransfer对象
	 */
	// 1. 获取源元素
	var myimg = document.getElementById("myimg");
	// 2. 获取目标元素
	var ele = document.getElementById("d2");
	// 3. 为源元素绑定dragstart事件
	myimg.addEventListener("dragstart",MyDragStart);
	// 4. 为目标元素绑定dragover和drop事件
	ele.addEventListener("dragover",MyDragOver);
	ele.addEventListener("drop",MyDrop);
	// 5. 实现事件的处理函数
	function MyDragStart(event){
		// 将源元素的数据,存储在dataTransfer对象中
		// 1. 获取源元素数据
		var mydata = myimg.src;
		// 2. 获取dataTransfer对象
		var trans = event.dataTransfer;
		/*
		 * 3. 调用setData(type,data)方法
		 *    * type - 类型,特指标识(id)
		 *      * 类型一般为string
		 *    * data - 设置的数据内容
		 */
		trans.setData("text",mydata);
	}
	function MyDragOver(event){
		event.preventDefault();
	}
	function MyDrop(event){
		// 从dataTransfer对象中,获取之前设置的数据
		// 1. 获取dataTransfer对象
		var trans = event.dataTransfer;
		/*
		 * 2. 从dataTransfer对象中,获取设置的数据
		 *  getData(type)方法
		 *  * type - 之前调用setData()时,传递的是什么值,这里传递什么值
		 */
		var mysrc = trans.getData("text");
		// 3. 将源元素(图片),添加到目标元素中
		ele.innerHTML = "<img src='"+mysrc+"' width='256'/>";
		// 4. 清除dataTransfer对象中的数据
		trans.clearData("text");
	}
	/*
	 * 事件对象 - 作为事件处理函数的参数存在
	 * * DOM底层代码的默认写法就是event
	 * * 如果使用event事件对象时,标准写法
	 *   * 允许不在事件的处理函数中定义参数
	 * * 注意 - 这种写法不是标准写法(不建议)
	 */
  </script>
 </body>
</html>

HTML5学习笔记（五）拖拽操作

猜你喜欢