html拖放api之图片相框,html5拖放API简介及应用
8种机械键盘轴体对比
本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?
通常我们在上传文件时,需要使用 这样的上传文件标签。而在html5中,它提供了拖放的接口,以下的内容就是对html5拖放的一些事件进行详细的解释和说明,并做了一些简单的应用:
上面的demo中涉及到的元素主要有 拖放元素 和 目标元素,下面分别说说它们:
被拖放元素
首先,如果使得一个元素能够拖动,就必须让元素有draggable=”true”属性,针对被拖动元素有下列事件:事件说明dragstart被拖拽的元素拖拽前进行触发的事件
drag被拖拽的元素拖拽开始与拖拽结束之间连续触发的事件
dragend被拖拽的元素拖拽结束时,触发的事件
实例
知道了以上的知识点,我们可以做了一个简单的实例,这个实例是对一个元素拖放时背景颜色的变化,并在它里面显示拖放的状态:
#drag_box{width:100px;height:100px;background:#ccc;}
(function(){
function (id){
return document.getElementById(id);
}
var oDrag=$("drag_box");
oDrag.οndragstart=function(){
this.style.background="green";
if(navigator.userAgent.toLowerCase().indexOf("msie")==-1){
ev.dataTransfer.setData('elem',oDrag);
}
}
oDrag.οndrag=function(){
this.innerHTML="拖拽中...";
}
oDrag.οndragend=function(){
this.style.background="#f55";
this.innerHTML="拖拽结束";
}
})();
目标元素
拖拽元素对应的是目标元素,它也有如下事件:事件说明dragenter被拖拽元素进入目标元素所触发的事件
dragover被拖拽元素进入目标元素之后,离开目标元素之前所连续触发的事件
dragleave被拖拽元素离开目标元素触发的事件
drop在目标元素上释放鼠标触发的事件(也就是把被拖放元素放入目标元素中)
实例
这个实例,分别记录了被拖放元素在进入和离开目标元素,还有在目标元素里移动以及释放的各种状态,如下:
#drag_box{width:100px;height:100px;background:#ccc;float:left;}
#target_box{width:200px;height:200px;background:#ccc;margin-left:150px;line-height:200px;text-align:center;}
(function(){
function (id){
return document.getElementById(id);
}
var oDrag=$("drag_box"),oTarget=$("target_box");
oDrag.οndragstart=function(ev){
this.style.background="green";
if(navigator.userAgent.toLowerCase().indexOf("msie")==-1){
ev.dataTransfer.setData('elem',oDrag);
}
}
oDrag.οndragend=function(){
this.style.background="#ccc";
}
oTarget.οndragenter=function(){
this.style.background="#fc0"
}
oTarget.οndragοver=function(ev){
this.innerHTML="在元素中移动!"
ev.preventDefault(); //在这个过程一定,要加阻止默认事件,否则不能触发drop
}
oTarget.οndragleave=function(){
this.innerHTML="";
this.style.background="#ccc"
}
oTarget.οndrοp=function(){
this.innerHTML="在目标元素里释放了!"
}
})();
dataTransfer对象
前面的内容只是大体的介绍了些拖拽和拖放的事件,并做了两个实例。但是这不是我们最终的目的,最终的目的当然是在拖动过程中实现数据的交换。
dataTransfer对象有两个主要方法:setData()和getData()。它们的具体使用如下:ev.dataTransfer.setData(dataType,value);
在拖放元素时把要拖动的数据存入dataTransfer对象中,它有两个函数,第一个参数是数据类型,第二个参数为携带的数据。ev.dataTransfer.getData(dataType);
getData()可以在drop的过程中取得由setData()保存的值。只有一个参数,即所存储的数据类型。
除了以上两个方法外,dataTransfer还有一个setDragImage 方法。setDragImage(element,x,y);
它表示可以用一个图片来设置鼠标拖动的图标(类似css里面的cursor),当然这里不单只是图标,也可以是其他元素,比如说自身;
另外,dataTransfer对象有一个属性:effectAllowed,它规定被拖动元素拖入目标元素时,鼠标的样式,属性值有如下;ev.dataTransfer.effectAllowed=CursorStyle;
CursorStyle的取值有 uninitialized ,none ,copy,link,move,copyLink,copyMove,linkMove,all。作用如下:属性描述uninitialized没有该被拖动元素放置行为
none被拖动的元素不能有任何行为
copy只允许值为”copy”的dropEffect
link只允许值为”link”的dropEffect
move只允许值为”move”的dropEffect
copyLink允许值为”copy”和”link”的dropEffect
copyMove允许值为”copy”和”link”的dropEffect
linkMove允许值位”link”和”move”的dropEffect
all允许任意dropEffect
实例
这个实例是将列表拖入目标元素并进行删除。而且在拖动被拖动元素时设置了鼠标拖动的图标,并且拖入到目标元素也改变了鼠标样式。
#drag_box{width:100px;height:100px;float:left;}
#target_box{width:200px;height:200px;background:#ccc;margin-left:150px;line-height:200px;text-align:center;}
- 111
- 222
- 333
(function(){
function (id){
return document.getElementById(id);
}
var oDrag=$("drag_box"),oTarget=$("target_box"),aLi=oDrag.getElementsByTagName("li"),removeEle=null,oImg=document.createElement("img");
oImg.src="logo.png";
for(var i=0;i
aLi[i].οndragstart=function(ev){
this.style.background="green";
if(navigator.userAgent.toLowerCase().indexOf("msie")==-1){
ev.dataTransfer.setData("text",ev.target.innerHTML);
removeEle=ev.target;
ev.dataTransfer.effectAllowed="copyLink";
ev.dataTransfer.setDragImage(oImg,0,0);
}
}
aLi[i].οndragend=function(){
this.style.background="#ccc";
}
}
oTarget.οndragenter=function(){
this.style.background="#fc0"
}
oTarget.οndragοver=function(ev){
this.innerHTML="在元素中移动!"
ev.preventDefault();
}
oTarget.οndrοp=function(ev){
ev.preventDefault();
this.innerHTML="元素已被删除!";
document.title=typeof removeEle;
oDrag.removeChild(removeEle);
}
})();
files对象
在html5中,关于拖动api里还介绍了一个files对象。该对象主要是为浏览器读取拖动到浏览器里的外部文件信息和内容提供了接口。并且该对象的所有事件都是在拖动文件释放到目标元素后才执行的,也就是说都是在drop里面触发的。以下对files对象的相关属性和方法进行介绍:
获取外部拖动文件信息,返回的是一个拖动文件的列表:ev.dataTransfer.files;
读取外部拖动文件信息,首先要创建读取对象,然后读取文件信息的url。当读取成功后,此时在对象onload下可以通过result来得到读取文件的信息内容,最后进行相关操作:files=ev.dataTransfer.files;
filesReader=new FileReader();
filesReader.readAsDataURL(files[0]);
filesReader.οnlοad=function(){
var obj=document.createElement("elem");
obj.src=this.result;
//do something
}
实例
该实例利用files对象来拖动外部文件到浏览器。
#target_box{width:100px;height:100px;background:#ccc;line-height:100px;text-align:center;font-size:12px;}
img{width:80px;height:50px;display:block;margin:10px;
(function(){
function (id){
return document.getElementById(id);
}
var oTarget=$("target_box");
oTarget.οndragenter=function(){
this.style.background="#fc0"
}
oTarget.οndragοver=function(ev){
this.innerHTML="在元素中移动!"
ev.preventDefault();
}
oTarget.οndrοp=function(ev){
ev.preventDefault();
this.innerHTML="元素已添加!";
var files=ev.dataTransfer.files;
for(var i=0;i
var filesReader=new FileReader();
filesReader.readAsDataURL(files[i]);
filesReader.οnlοad=function(){
var oImg=document.createElement("img");
oImg.src=this.result;
document.body.appendChild(oImg);
}
}
}
})();
最后关于html5拖动API,还有一些内容不是太理解,比如dataTransfer对象里数据的设置及参数和数据的读取,还有当把被拖动元素拖到目标元素释放时,在firefox浏览器中会默认打开新窗口,希望找到相关内容进行更多的了解。
html拖放api之图片相框,html5拖放API简介及应用相关推荐
- HTML5自动生成相框,HTML5拖放API实现自动生成相框功能
实现功能: 将桌面图片拖入指定地方,生成相框和相关信息. 相框需要自己配置,设置为背景,在CSS中设置. 效果如图: html部分: H5拖放API之图片相框效果 > 请将图片拖放至此处 CSS ...
- html5通过api调数据库,使用HTML5数据库API [关闭](Using HTML5 Database API [closed])
使用HTML5数据库API [关闭](Using HTML5 Database API [closed]) 我正在开发一个使用phonegap/cordova 2.2的web应用程序,并希望将数据存储 ...
- html5 api navigator,Navigator - 《HTML5 Plus API 指南》 - 书栈网 · BookStack
navigator navigator用于管理浏览器运行环境信息 方法: 对象: 回调方法: 权限: 5+功能模块(permissions){ // ... "permissions&quo ...
- 基于HTML5拖放API:目前市面上的一些修图工具软件带有自动为图片添加不同款式相框的功能,用户可以选择本地图片文件然后为其添加相框效果
这是一份很简单的作业,由于百度当时没找到,就自己写了一下,命名不是很机智只是为了写的快且好懂,使用只需要将桌面的图片拖拉进里面就直接生成一个新的带相框的图片,代码很短好理解.. <!DOCTYP ...
- html5自动生成图片,HTML5拖放API如何实现自动生成相框功能 HTML5拖放API实现自动生成相框功能代码...
HTML5拖放API如何实现自动生成相框功能?下面小编给大家分享一下HTML5拖放API实现自动生成相框功能代码,代码很详细,小编觉得挺不错的,有需要的小伙伴们可以来看看. 实现功能: 将桌面图片拖入 ...
- html相框自动生成功能,网页制作HTML5拖放API实现自动生成相框功能
实现功能: 将桌面图片拖入指定地方,生成相框和相关信息. 相框需要自己配置,设置为背景,在CSS中设置. 效果如图: html部分: H5拖放API之图片相框效果 > 请将图片拖放至此处 CSS ...
- html5相框,科技常识:HTML5拖放API实现自动生成相框功能
今天小编跟大家讲解下有关HTML5拖放API实现自动生成相框功能 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5拖放API实现自动生成相框功能 的相关资料,希望小伙伴们看了有所帮 ...
- html5 drag this,HTML5拖放(drag和drog)
拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就 ...
- 图片相框展示的设计与实现
图片相框展示的设计与实现 功能要求: 使用HTML5拖放API相关技术,在网页上实现为指定图片自动生成图片相框的效果.用户通过拖拽可以将本地的图片文件放置到页面上指定区域,即可在页面上自动生成带有相框 ...
最新文章
- iOS使用Security.framework进行RSA 加密解密签名和验证签名
- Python最简编码规范
- 海思 HI35* rtsp服务器
- jquery方法animate操作图片移动
- lua io详细操作
- 【初级01】java JVM核心技术(1):字节码、类加载器、GC机制
- 图像局部特征(十五)--MSCR
- linux 添加链接与删除链接(ln命令的用法)
- springboot 导出文件_开发阶段,将SpringBoot应用快速部署到K8S - 程序员欣宸
- php网易音乐api接口,网易云音乐API接口
- 多云环境无处不在,但其管理才刚开始
- ERROR: Cannot uninstall ‘PyYAML‘. It is a distutils installed project and thus we cannot accurately
- MarkDown中使用gif的神器:LICEcap
- 26岁零基础想转行做软件测试可行吗?多方面分析
- u盘读不出来怎么修复?
- POJ 2263 Heavy Cargo
- Aurora8B10B IP使用 -02- IP功能设计技巧
- Android开发学什么
- SQL中的聚合函数介绍
- Microsoft365 PowerPoint找不到设计灵感design ideas、历史版本记录、自动保存不见了