H5新特性 - 拖拽属性

拖拽属性

拖拽属性

H5的新特性 : 是指鼠标点击源对象之后，不松手将其拖拽到目标对象，或半途松手(释放)的过程

拖拽 Drag

源对象： 指定的鼠标点击的一个事物，例如： 一个元素，一个图片等
目标对象： 指定是我们拖动源对象后，预计要进入的区域

• 被拖动的源对象可以触发的方法

1. ondragstart: 源对象开始被拖动
2. ondrag: 被拖动过程中
3. ondragend: 源对象被拖动结束

• 源对象进入目标对象可以触发的事件

1. ondragenter： 源对象进入目标对象时触发
2. ondragover: 源对象悬停在目标对象上方时触发
3. ondragleave: 源对象被拖动着离开目标对象时触发
4. ondrop: 源对象在目标对象上松手时 触发

• 拖拽属性 一共就是这7个方法
  功能： 用于在源对象和目标对象之间传递数据

1. setData( ): 设置数据 参数是 key 和 value(value必须是字符串)
2. getData( ): 获取数据，参数是key 。 通过key去获取对应的value值

• dataTransfer 注意：
  dataTransfer的传输数据必须为字符串类型，所以需要转化数据类型，那么就要使用到JSON方法

	// 使用JSON对象中的方法 转换 字符串和对象的数据类型
    var str = new String();
    var obj = {};
	// JSON.stringify(对象)：可以将对象类型 转换为字符串类型
    console.log(typeof JSON.stringify(obj));

    //JSON.parse(字符串)：可以将字符串类型  转换为对象类型
	console.log(typeof JSON.parse(str));

注意

标签中自带的属性： draggable 是否可以拖拽，默认值 false

	// 例：
	
	// 切记开启draggable属性
	<div class="box" draggable="true"></div>

	<script type="text/javascript">
			
		var box = document.getElementsByClassName("box")[0];
		
		// 定义全局变量，存储鼠标的位置				
		var offsetX;
		var offsetY;
		
    	// 开始拖动时
		box.ondragstart = function(ev){	
			// 获取鼠标在元素上的位置			
			offsetX = ev.offsetX;
			offsetY = ev.offsetY;			
		}
		
		// 源对象被拖动时	
		box.ondrag = function(ev){			
			var x = ev.clientX;
			var y = ev.clientY;
			
			// drag事件最后一刻，无法读取鼠标的坐标， x 和 y 都会变成0	
			if (x == 0 || y == 0) {
				return false; // 直接结束，不赋值给元素
			}
				
			x -= offsetX;
			y -= offsetY;
				
			this.style.left = x + "px";
			this.style.top = y + "px";
		}
		
		// 拖动结束时
		box.ondragend = function(){
			console.log(1)
		}
		
	</script>