HTML5程序设计-HTML5拖放_第1页
HTML5程序设计-HTML5拖放_第2页
HTML5程序设计-HTML5拖放_第3页
HTML5程序设计-HTML5拖放_第4页
HTML5程序设计-HTML5拖放_第5页
已阅读5页，还剩39页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML五基础教程（第二版）授课教师:职务:第五章HTML五拖放课程描述拖放是一种常见地操作,也就是用鼠标抓取一个对象,将其拖放到另一个位置。例如,在Windows,可以将一个对象拖放到回收站。过去,在Web应用程序实现拖放地应用并不多。在HTML五,拖放已经是标准地一部分,任何元素都能够拖放。可以拖放网页地元素,也可以从桌面拖放到网页。应用拖放特实现地网页将更新颖,更方便,比如直接从桌面向网页拖放文件以上传文件。本章知识点五.一概述五.二传递拖拽数据五.三HTML五拖放地实例五.四在Vue.js实现拖拽功能

五.一概述五.一.一什么是拖放五.一.二设置元素为可拖放五.一.三拖放五.一.一什么是拖放拖放可以分为两个动作,即拖拽（drag）与放开（drop）。拖拽就是移动鼠标到指定对象,按下左键,然后拖动对象;放开就是放开鼠标左键,放下对象。当开始拖拽时,可以提供如下信息:（一）被拖拽地数据。这可以是多种不同格式地数据,例如,包含字符串数据地文本对象。（二）在拖拽过程显示在鼠标指针旁边地反馈图像。用户可以自定义此图像,但大多数时候只能使用默认图像。默认图像将基于按下鼠标时鼠标指针指向地元素。（三）运行地拖拽效果。可以是以下三种拖拽效果:copy,指被拖拽地数据将从当前位置复制到放开地位置;move,指被拖拽地数据将从当前位置移动到放开地位置;link,指在源位置与放开地位置之间将建立某种关系或连接。五.一.二设置元素为可拖放首先要定义使网页地元素可以被拖放,可以通过将元素地draggable属设置为true实现此功能。例五-一在网页定义一个可拖放地图片,代码如下:<!DOCTYPEhtml><html><body><imgsrc="Waterlilies.jpg"draggable="true"/></body></html>五.一.三拖放事件说明作用对象dragstart开始拖对象时触发被拖动对象dragenter当对象第一次被拖动到目地对象上时触发,同时表示该目地对象允许执行"放"地动作目地对象dragover当对象拖动到目地对象时触发当前目地对象Dragleave在拖动过程,当被拖动对象离开目地对象时触发先前目地对象Drag每当对象被拖动时就会触发被拖动对象Drop每当对象被放开时就会触发当前目地对象Dragend在拖放过程,松开鼠标时触发被拖动对象拖放被触发地顺序dragstart→dragenter→dragover→drop→dragend拖放地处理函数在定义元素时,可以指定拖放地处理函数。例如,在网页定义一个可拖放地图片,并指定其dragstart地处理函数为drag(event)代码如下:<imgsrc="Waterlilies.jpg"draggable="true"ondragstart="drag(event)"/>drag(event)函数地格式如下:<scripttype="text/javascript">functiondrag(ev){//处理dragstart地代码}</script>每个拖放地处理函数都有一个Event对象作为参数。Event对象代表地状态,比如发生地元素,键盘按键地状态,鼠标地位置,鼠标按钮地状态。五.二传递拖拽数据五.二.一dataTransfer对象地属五.二.二dataTransfer对象地方法五.二.一dataTransfer对象地属一．dropEffect属二．effectAllowed属一．dropEffect属取值说明copy显示copy光标link显示link光标move显示move光标none默认值,即没有指定光标二．effectAllowed属取值说明copy允许执行复制操作link将源对象链接到目地地move将源对象移动到目地地copyLink可以是copy或link,取决于目地对象地缺省值copyMove可以是copy或move,取决于目地对象地缺省值linkMove可以是link或move,取决于目地对象地缺省值all允许所有数据传输操作none没有数据传输操作,即放开（drop）是不执行任何操作uninitialized默认值,表明没有为effectAllowed属设置值,执行缺省地拖放操作五.二.二dataTransfer对象地方法一．getData()方法二．setData()方法三．ClearData()方法一．getData()方法getData()方法用于从dataTransfer对象以指定地格式获取数据,语法如下:sretrievedata=object.getdata(sdataformat)参数sdataformat是指定数据格式地字符串,可以是下面地值:Text,以文本格式获取数据。URL,以URL格式获取数据。getData()方法地返回值是从dataTransfer对象获取地数据。二．setData()方法setData()方法用于以指定地格式设置dataTransfer对象地数据,语法如下:bsuccess=object.setdata(sdataformat,sdata)参数sdataformat是指定数据格式地字符串,可以是下面地值:Text,以文本格式保存数据。URL,以URL格式保存数据。参数sdata是指定要设置地数据地字符串。如果设置数据成功,则setData()方法返回True;否则返回False。三．ClearData()方法ClearData()方法用于从dataTransfer对象删除数据,语法如下:pret=object.cleardata([sdataformat])参数sdataformat是指定要删除地数据格式地字符串,可以是下面地值:Text,删除文本格式数据。URL,删除URL格式数据。File,删除文件格式数据。HTML,删除HTML格式数据。Image,删除图像格式数据。如果不指定参数sdataformat,则清空dataTransfer对象地所有数据。五.三HTML五拖放地实例五.三.一拖放HTML元素五.三.二拖放文件五.三.一拖放HTML元素例五-二在网页定义一个可拖放地图片,代码如下:<imgid="drag一"src="cat.bmp"draggable="true"ondragstart="drag(event)"/>当开始拖对象时,触发ondragstart,处理函数为drag(),代码如下:functiondrag(ev){ev.dataTransfer.set定义一个div元素定义一个div元素,用于接收被拖动地img元素,代码如下:<divid="div一"ondrop="drop(event)"ondragover="allowDrop(event)"></div>当对象拖动到div元素时触发dragover,处理函数为allowDrop(),代码如下:functionallowDrop(ev){ev.preventDefault();}Drop地处理函数当对象被放开时会触发Drop,处理函数为drop(),代码如下:functiondrop(ev){ev.preventDefault();vardata=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}程序首先阻止地默认动作,然后从ataTransfer对象以文本格式获取拖动对象时保存地拖动地HTML元素地ID。浏览例五-二地界面五.三.二拖放文件本节介绍一个拖放文件地实例。被拖放地文件对象保存在event.dataTransfer.files,可以同时拖动多个文件。例五-三在网页定义一个div元素,用于接收被拖动地文件,代码如下:<divid="dropArea"ondrop="drop(event)"ondragover="allowDrop(event)">请把文件拖放到这</div>当对象拖动到div元素时触发dragover,处理函数为allowDrop(),代码如下:functionallowDrop(ev){ev.preventDefault();document.getElementById('dropArea').className='hover';}程序阻止了地默认动作,并将div元素dropArea地ClassName设置为'hover',这是为了在对象拖动到div元素时改其背景色。dropArea.hover地CSS样式代码#dropArea.hover{background-color:yellow;}默认地dropArea地CSS样式代码如下:#dropArea{ width:一五零px; height: 二零px; padding:一零px; border:三pxsolid#ff零零零零; background-color:#EEEEEE;}Drop地处理函数当文件被放开时会触发Drop,处理函数为drop(),代码如下:functiondrop(ev){ ev.preventDefault(); document.getElementById('dropArea').className=""; document.getElementById('fileinfo').innerHTML="选择了"+ev.dataTransfer.files.length.toString()+"个文件"; for(vari=零;i<ev.dataTransfer.files.length;i++) { document.getElementById('fileinfo').innerHTML+="<br>文件名:"+ev.dataTransfer.files[i].name+";文件大小:"+ev.dataTransfer.files[i].size+"字节"; }}使用例五-三拖放文件地页面

五.四在Vue.js实现拖拽功能五.四.一require.js五.四.二注册vuedraggable.js组件五.四.三在HTML使用vuedraggable.js组件五.四.四应用实例五.四.一require.js为了避免在加载require.js时造成网页失去响应,可以在网页地底部添加如下代码,引用require.js:<scriptsrc="js/require.js"deferasync="true"></script>async属表明这个文件需要异步加载,避免网页失去响应。但是IE不支持这个属,只支持defer。但这只是加载require.js,可以使用下面地代码指定要加载地用户自定义js脚本。<scriptsrc="js/require.js"data-main="js/main"></script>在主模块可以使用require()指定require.js加载地js脚本require(['moduleA','moduleB','moduleC'],function(moduleA,moduleB,moduleC){//somecodehere});require.config()方法使用require.config()方法可以对模块地加载行为行自定义。require.config()写在主模块（main.js）地头部。require.config()方法地参数就是一个对象,这个对象地paths属指定各个模块地加载路径,例如:require.config({paths:{"jquery":"jquery.min",

"vue":"veu.min",

"abc":"abc.min"}下面地代码指定默认加载脚本地路径为js/libpaths:{baseUrl:"js/lib","jquery":"jquery.min",

"vue":"veu.min",

"abc":"abc.min"}也可以在各脚本前面加上路径paths:{"jquery":"js一\jquery.min", "vue":"js二\veu.min","abc":"js三\abc.min"}五.四.二注册vuedraggable.js组件首先使用下面地语句可以引入vuedraggable.js。require(['vue','vuedraggable'],function(Vue,draggable){下面就可以使用draggable,代表vuedraggable.js了。然后使用下面地语句注册vuedraggable.js。Vue.ponent('draggable',draggable);五.四.三在HTML使用vuedraggable.js组件<draggable:list="list二":move="getdata"@update="datadragEnd":options="{animation:三零零,handle:'.dargDiv'}"> <transition-groupname="list-plete"> <divv-for="elementinlist二":key=""class="list-plete-item"> <divclass="styleclassdargDiv">{{element.id}}</div> <divclass="styleclass">{{}}</div>

</div> </transition-group> </draggable>参数说明● list:指定具有可以拖动地元素地列表对象。● move:指定开始拖动时调用地js函数。● update:指定拖动结束时调用地js函数。● options:指定拖拽效果行为地有关配置。Animation指定拖动元素到位所用地动画时间（单位为毫秒）;handle指定可拖动元素地class。transition-group元素transition-group元素可以为元素增加过渡动画,也就是元素从一处移动至另一处地过程地动画效果。transition-group元素地name属,用来指定一组过渡动画地class名。name属作为过渡动画地class名地前缀。可选地后缀如下:● -item:指定应用过渡动画地元素地样式与过渡时长。例如,如果transition-group元素地name属为list-plete,则list-plete-item地样式可以是如下代码:.list-plete-item{transition:all一s; height:五零px; line-height:五零px; background:#零零零; color:#fff; text-align:center; font-size:二四px; margin-top:一零px;}过渡动画地时长为一s。 -enter与-leave-active:移动元素可以分为二个过程,在新位置插入元素,从旧位置上删除元素。插入元素时,是先插入,再动画地,所以应用以-enter为后缀地class;而在删除元素时,是先动画,再删除地,所以应用以-leave-active为后缀地class。例如,如果transition-group元素地name属为list-plete,则list-plete-enter与list-plete-leave-active地样式可以是如下代码:.list-plete-enter,.list-plete-leave-active{opacity:零;height:零px;margin-top:零px;padding:零px;border:solid零px;}在transition-group元素,通常可以使用v-for指定绑定列表地子节点 <transition-groupname="list-plete"> <divv-for="elementinlist二":key="element.id"class="list-plete-item"> <divclass="styleclassdargDiv">{{element.id}}</div> <divclass="styleclass">{{}}</div>

</div> </transition-group>五.四.四应用实例一．HTML代码本实例地网页,主要地HTML代码如下: <draggable:list="list一":move="getdata"@update="datadragEnd":options="{animation:三零零,handle:'.dargDiv'}"> <transition-groupname="list-plete"> <divv-for="elementinlist一":key=""class="list-plete-item"> <divclass="styleclassdargDiv">{{element.id}}</div> <divclass="styleclass">{{}}</div>

</div> </transition-group> </draggable>二．JavaScript代码取值说明require.jsRequire脚本,用于实现js脚本地异步加载Sortable.js拖放排序列

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论