我最近出席了一系列的研讨会,HTML5这个主题在这些会上反复出现。出于好奇我略看了几眼后,开始觉得应该好好的挖掘一下HTML5,看看它究竟会给我们今天技术上带来哪些好处。一个特别有意思的东西就是拖拽功能编程接口 … 早期的HTML编程开发者一直对此渴望却不可及。我感觉这个功能非常有用 … 拖拽功能的实现已经成了几个不费吹灰之力的函数调用了。
<wbr></wbr>
<wbr><br>
为了演示拖拽用例,我要创建一个简单的网络配置工具(UI),管理员可以用它来收集资源。你能在各个区域之间拖拽资源,往区域里添加资源,删除没有用的资源。出于教学的目的,我尽量使这个例子简单,但可以看到,依据这些基本的做法,你可以开发出一个全功能的网络管理工具。<br><wbr></wbr></wbr>
<wbr></wbr>
<wbr><br><wbr><strong><wbr>下面就是我的例子,你可以试用一下<span></span></wbr></strong><wbr>(需要Firefox 3.5 以上版本):<br></wbr></wbr></wbr>
<wbr><a href="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/d_and_d.html?lang=en" target="_blank" style="">https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/d_and_d.html?lang=en</a><br><wbr><br></wbr></wbr>
<wbr><span><span></span></span><br><wbr><br><br><wbr><span><wbr>实现拖拽功能的关键方法非常的简单,就像下面写的这样:</wbr></span><wbr><br><wbr><br><wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr>function dragIt(target, e) {<br><wbr> e.da<wbr>taTr<wbr>ansf<wbr>er.s<wbr>etDa<wbr>ta(‘<wbr>Span<wbr>Img’<wbr>, target.id);<br><wbr>}<br><wbr><br><wbr>function dropIt(target, e) {<br><wbr> var id = e.da<wbr>taTr<wbr>ansf<wbr>er.g<wbr>etDa<wbr>ta(‘<wbr>Span<wbr>Img’<wbr>);<br><wbr> targ<wbr>et.a<wbr>ppen<wbr>dChi<wbr>ld(d<wbr>ocum<wbr>ent.<wbr>getE<wbr>leme<wbr>ntBy<wbr>Id(i<wbr>d));<wbr><br><wbr> e.preventDefault();<br><wbr>}<br><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><span style="font-weight:bold"><wbr>我使用了table元素来实现布局结构,并把它当做</wbr></span><wbr><u style="font-weight:bold"><wbr>ondrop</wbr></u><wbr><span style="font-weight:bold"><wbr>事件的目标:</wbr></span><wbr><br><wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><<wbr>td align=”<wbr>center”<wbr><span></span>width=”<wbr>100″<wbr><span></span>id=”<wbr>blue”<wbr><span></span>ondrop=”<wbr>dropIt(this, event)”<wbr>ondragenter=”<wbr>return false”<wbr><span></span>ondragover=”<wbr>return
false”<wbr>><wbr> …. <<wbr>/td><wbr><br><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><span style="font-weight:bold"><wbr>我使用了span元素(包裹住图片)做</wbr></span><wbr><u style="font-weight:bold"><wbr>拖拽</wbr></u><wbr><span style="font-weight:bold"><wbr>对象:</wbr></span><wbr><br><wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><<wbr>span draggable=”<wbr>true”<wbr><span></span>id=”<wbr>t_1″<wbr><span></span>ondragstart=”<wbr>dragIt(this, event)”<wbr>><wbr><<wbr>img src=”<wbr>http<wbr>s://<wbr>www.<wbr>ibm.<wbr>com/<wbr>deve<wbr>lope<wbr>rwor<wbr>ks/m<wbr>ydev<wbr>elop<wbr>erwo<wbr>rks/<wbr>blog<wbr>s/bo<wbr>blea<wbr>h/re<wbr>sour<wbr>ce/t<wbr>ower<wbr>.jpg<wbr>“<wbr>><wbr><<wbr>/span><wbr><br><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><br><wbr><strong><wbr>你可以下载拖拽例子中的所有的HTML代码</wbr></strong><wbr><span></span><a href="https://www.ibm.com/developerworks/mydeveloperworks/files/app?lang=en#/person/270000CN12/file/ca25c6eb-f34a-437c-85da-5b3b24b3b9bb" style="color:rgb(12,116,166); text-decoration:none"><wbr>点击下载</wbr></a><wbr>.<span></span><br><wbr><br><wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<wbr><br><wbr>以我这初始的体验来看,HTML5将会提供给我们令人激动的用途。目前,这些API是有限制的,只在个别的浏览器里有效;对于我的例子,你需要在Firefox 3.5 版本以上才能运行。我将继续探索有哪些新功能今天我们可以使用,继续写更多的例子 … 请耐心等待!</wbr></wbr>
原文链接:
分享到:
相关推荐
NULL 博文链接:https://wjlgryx.iteye.com/blog/974247
一个关于javascript的拖拽的例子,很简单,新手学习用。
这是一个用HTML5实现表格拖拽对的小例子
这是一款html5和CSS3可拖拽的横向图片预览布局。该布局将所有图片在屏幕中央进行横向排布,可以通过鼠标前后拖拽图片。当点击图片的标号数字时,隐藏所有的缩略图,在屏幕上显示当前被点击的图片放大,文本内容展示...
JTree的例子,可以拖动节点 JTree的例子,可以拖动节点
文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传。给用户体验带来很大问题。html5开始支持拖拽上传的需要的api。nodejs也是一个最近越来越流行的...
html5移动端拖拽图片、拖拽标签等插件以及相应的demo、适用于手机网址开发和mui前端开发、h5app开发中的图片拖拽、div拖拽等
html5 jquery拖动排序- 支持IOS,Android等移动端和PC的拖拽排序功能,鼠标拖动DIV方格即可自动排序到其它地方,智能排序,类似前几年的博客主页模块定制功能,支持IOS,Android等移动端和PC的拖拽排序功能,操作...
JS 拖拽例子 Example draganddrop
拖动组件的一个例子,html中使用
HTML5实现图片拖动,旋转,放大,拉伸等特效 效果详情参考http://www.xwcms.net/webAnnexImages/fileAnnex/20131031/91857/index.html
小例子,jsp实现的拖拽功能,有兴趣的过来看看
简单的jQuery小例子(购物车/Cookie/拖拽功能 简单的jQuery小例子(购物车/Cookie/拖拽功能 简单的jQuery小例子(购物车/Cookie/拖拽功能 简单的jQuery小例子(购物车/Cookie/拖拽功能 简单的jQuery小例子(购物车/...
文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传。给用户体验带来很大问题。html5开始支持拖拽上传的需要的api。nodejs也是一个最近越来越流行的...
bootstarp拖拽布局例子,框架官网http://layoutit.justjavac.com/#close,实现类似QQ空间小窝布局模式下的自由布局功能。
html5 拖拽交换
JQuery实现的GridView行拖拽例子保证可用
这是一个用html5实现了图片拖拽的小例子
HTML5基于SVG实现可拖拽和缩放的世界地图效果源码.zip
采用html5+css3+jqurey实现类似word操作图片,拖动修改图片大小,拖动旋转,拖动改变位置。