您的位置:知识库 » Web前端

HTML5 – 一个拖拽功能的例子

来源: aqee  发布时间: 2010-08-20 14:57  阅读: 2893 次  推荐: 0   原文链接   [收藏]  

  我最近出席了一系列的研讨会,HTML5这个主题在这些会上反复出现。出于好奇我略看了几眼后,开始觉得应该好好的挖掘一下HTML5,看看它究竟会给我们今天技术上带来哪些好处。一个特别有意思的东西就是拖拽功能编程接口…早期的HTML编程开发者一直对此渴望却不可及。我感觉这个功能非常有用…拖拽功能的实现已经成了几个不费吹灰之力的函数调用了。

  为了演示拖拽用例,我要创建一个简单的网络配置工具(UI),管理员可以用它来收集资源。你能在各个区域之间拖拽资源,往区域里添加资源,删除没有用的资源。出于教学的目的,我尽量使这个例子简单,但可以看到,依据这些基本的做法,你可以开发出一个全功能的网络管理工具。

  下面就是我的例子的效果图:

  实现拖拽功能的关键方法非常的简单,就像下面写的这样:

function dragIt(target, e){
e.dataTransfer.setData(’SpanImg’, target.id);
}

function dropIt(target, e){
var id = e.dataTransfer.getData(’SpanImg’);
target.appendChild(document.getElementById(id));
e.preventDefault();
}

  我使用了table元素来实现布局结构,并把它当做ondrop事件的目标:

 <td align=”center”width=”100″ id=”blue” ondrop=”dropIt(this, event)” ondragenter=”return false” ondragover=”return false”> …. </td>

  我使用了span元素(包裹住图片)做拖拽对象:

 <span draggable=”true” id=”t_1″ ondragstart=”dragIt(this, event)”><img src=”https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/tower.jpg“></span>

  你可以下载拖拽例子中的所有的HTML代码点击下载

  以我这初始的体验来看,HTML5将会提供给我们令人激动的用途。目前,这些API是有限制的,只在个别的浏览器里有效;对于我的例子,你需要在Firefox 3.5 版本以上才能运行。我将继续探索有哪些新功能今天我们可以使用,继续写更多的例子…请耐心等待!

0
0
标签:HTML5

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻