HTML5拖拽API知识点总结

一.拖放步骤

1.设置标签元素的draggable属性为true，表示可拖拽。2.编写拖放事件的有关代码。

二.拖放触发的事件

    dragstart：网页元素开始拖动时触发。
    drag：被拖动的元素在拖动过程中持续触发。
    dragenter：被拖动的元素进入目标元素时触发，应在目标元素监听该事件。
    dragleave：被拖动的元素离开目标元素时触发，应在目标元素监听该事件。
    dragover：被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。
    drap：被拖动元素或从文件系统选中的文件，拖放落下时触发。
    dragend：网页元素拖动结束时触发

三.dataTransfer对象属性的应用

        拖动开始时，在dataTransfer对象上储存一条文本信息，内容为“你好”。当拖放结束时，可以用getData方法取出这条信息。
    
        1.dataTransfer对象的属性：
    
        dropEffect：拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none。
        effectAllowed：指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默认值，等同于all，即允许一切操作）。
        files：包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。
        types：储存在DataTransfer对象的数据的类型。
    
       2. dataTransfer对象的方法：
    
        setData(format, data)：在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。
        getData(format)：从dataTransfer对象取出数据。
        clearData(format)：清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。
        setDragImage(imgElement, x, y)：指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。
    
       dataTransfer对象允许在其上存储数据，这使得在被拖动元素与目标元素之间传送信息成为可能。

四.写一个基本的拖放

js代码：

var oSource = document.getElementById('source');
	var oDist = document.getElementById('dist');
	var oImg = document.getElementById('img');
	//(1) dragstart 拖放开始
	oSource.addEventListener('dragstart',function(ev){
		//向dataTransfer对象追加数据
		var dt = ev.dataTransfer;
		dt.effectAllowed = 'all';
		//设置自定义图标
		//dt.setDragImage(oImg, -10, -10);
		//(2)设置拖动元素的值
		dt.setData("ss","你好");
	},false);
	//(3) dragend 拖放结束
	oDist.addEventListener('dragend',function(ev){
		//阻止默认行为（拒绝被拖放）
		ev.preventDefault();
	},false);
	//(4) drop 被拖放
	oDist.addEventListener('drop',function(ev){
		//从dataTransfer对象中获取数据
		var dt = ev.dataTransfer;
		var text = dt.getData('ss');
		oDist.innerHTML += text;
		//(5)阻止默认行为(拒绝被拖放)
		ev.preventDefault();
		//停止事件的传播
		ev.stopPropagation();
	},false);
	//(6)阻止默认行为
	document.ondragover = function(ev){ev.preventDefault();};
	document.ondrop = function(ev){ev.preventDefault();};

css代码：

#source{width:100px;border:1px solid black;}
#dist{width:100px;height:200px;border:1px solid #c0c0c0;margin-top:20px;}

HTML代码：

<div id='source' draggable="true">被拖拽元素</div>
<div id='dist'>拖拽元素:</div>
<img src='1.jpg' id='img1'/>

 

转载于:https://my.oschina.net/dreamchenming/blog/675372