1. 爱易网页
  2. HTML教程
  3. HTML5 – 一个拖拽效能的例子

HTML5 – 一个拖拽效能的例子

日期：2014-05-17　 浏览次数：20740 次

HTML5 – 一个拖拽功能的例子

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


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


下面就是我的例子，你可以试用一下 (需要Firefox 3.5 以上版本):

https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/d_and_d.html?lang=en


 


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

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 版本以上才能运行。我将继续探索有哪些新功能今天我们可以使用，继续写更多的例子 … 请耐心等待！

 

原文链接：

相关资料更多>

  1. 开发新浪微博站内使用
  2. 初学者，关于DIV边框颜色透明的有关问题
  3. html:errors显示中文乱码解决办法
  4. 前端性能优化：尽量使用CSS动画
  5. 网页设计惯用代码
  6. 急求，一个简单的网页,该怎么处理
  7. 八款个性化的jQuery和CSS3菜单
  8. css 表格的宽度有关问题
  9. iframe中的表头怎么固定不动