HTML5通过api实现拖放效果 dataTransfer对象

dataTransfer对象

说明:dataTransfer对象用于从被拖动元素向放置目标传递字符串数据。因为这个对象是 event 的属性,所以在拖放事件的事件处理程序外部无法访问 dataTransfer。在事件处理程序内部,可以使用这个对象的属性和方法实现拖放功能。

作用 - 提供了剪贴板功能

获取 - 通过事件对象event

方法 - setData(type,data)方法 ,向剪贴板设置(添加)数据

type - 默认为string类型,充当数据标示(ID)

data - 设置的数据, 一定是在源元素事件中使用

方法 - getData(type)方法,从剪贴板中获取数据,在目标元素事件中使用

方法 - clearData(type)方法, -将剪贴板中的数据清除

事件 - dragover和dragleave事件(必须) 两个事件组合实现拖拽效果。

代码示例如下:

复制代码
window.onload=function(){

		var ele1=document.querySelector("#myimg");
		var d1=document.querySelector("#d1");
		var d2=document.querySelector("#d2");

		ele1.addEventListener("dragstart",function(){
			// 获取到源元素使用的数据 - src属性
			var mysrc=ele1.src;
			// 将数据设置到dataTransfer对象中
			event.dataTransfer.setData("text",mysrc);
		});
		
		d2.addEventListener("drop",function(){
			event.preventDefault();	// a. 阻止页面的默认行为
			var mysrc=event.dataTransfer.getData("text");// b. 从dataTransfer对象得到数据
			var img=document.createElement("img");// c. 创建<img>元素,设置一些属性
			img.src=mysrc;
			img.width="256";
			d2.appendChild(img);// d. 将<img>元素添加到id为d2的div元素中
			event.dataTransfer.clearData("text");// e. 清除dataTransfer对象中的数据内容
			d1.removeChild(ele1);// f. 将源元素从页面中删除
		});
		d2.addEventListener("dragover",function(){event.preventDefault();});
		d2.addEventListener("dragleave",dragleave);
		function dragleave(){
			event.preventDefault();
			event.dataTransfer.clearData("text");
		}
	}

完整demo下载: https://download.csdn.net/download/u010564801/89037997

示例效果如下:将源元素图片拖动至目标元素框内

相关推荐
翻滚吧键盘7 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾11 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉19 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。25 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我1 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing1 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css