HTML5 – 一個拖拽功能的例子
我最近出席了一系列的研討會，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();
}
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 版本以上才能運行。我將繼續探索有哪些新功能今天我們可以使用，繼續寫更多的例子…請耐心等待！
全站熱搜
留言列表
