深圳移动网站建设公,物业网站建设方案,淘宝详情页模板,wordpress空间转服务器dataTransfer对象
说明#xff1a;dataTransfer对象用于从被拖动元素向放置目标传递字符串数据。因为这个对象是 event 的属性#xff0c;所以在拖放事件的事件处理程序外部无法访问 dataTransfer。在事件处理程序内部#xff0c;可以使用这个对象的属性和方法实现拖放功能…dataTransfer对象
说明dataTransfer对象用于从被拖动元素向放置目标传递字符串数据。因为这个对象是 event 的属性所以在拖放事件的事件处理程序外部无法访问 dataTransfer。在事件处理程序内部可以使用这个对象的属性和方法实现拖放功能。
作用 - 提供了剪贴板功能
获取 - 通过事件对象event
方法 - setData(type,data)方法 向剪贴板设置(添加)数据 type - 默认为string类型充当数据标示(ID) data - 设置的数据 一定是在源元素事件中使用
方法 - getData(type)方法,从剪贴板中获取数据,在目标元素事件中使用
方法 - clearData(type)方法, -将剪贴板中的数据清除
事件 - dragover和dragleave事件必须 两个事件组合实现拖拽效果。
代码示例如下
window.onloadfunction(){var ele1document.querySelector(#myimg);var d1document.querySelector(#d1);var d2document.querySelector(#d2);ele1.addEventListener(dragstart,function(){// 获取到源元素使用的数据 - src属性var mysrcele1.src;// 将数据设置到dataTransfer对象中event.dataTransfer.setData(text,mysrc);});d2.addEventListener(drop,function(){event.preventDefault(); // a. 阻止页面的默认行为var mysrcevent.dataTransfer.getData(text);// b. 从dataTransfer对象得到数据var imgdocument.createElement(img);// c. 创建img元素,设置一些属性img.srcmysrc;img.width256;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
示例效果如下将源元素图片拖动至目标元素框内
