我最近出席了一系列的研讨会,HTML5这个主题在这些会上反复出现。出于好奇我略看了几眼后,开始觉得应该好好的挖掘一下HTML5,看看它究竟会给我们今天技术上带来哪些好处。一个特别有意思的东西就是拖拽功能编程接口 … 早期的HTML编程开发者一直对此渴望却不可及。我感觉这个功能非常有用 … 拖拽功能的实现已经成了几个不费吹灰之力的函数调用了。
为了演示拖拽用例,我要创建一个简单的网络配置工具(UI),管理员可以用它来收集资源。你能在各个区域之间拖拽资源,往区域里添加资源,删除没有用的资源。出于教学的目的,我尽量使这个例子简单,但可以看到,依据这些基本的做法,你可以开发出一个全功能的网络管理工具。
function dragIt(target, e) {
e.da taTr ansf er.s etDa ta(‘ Span Img’ , target.id);
}
function dropIt(target, e) {
var id = e.da taTr ansf er.g etDa ta(‘ Span Img’ );
targ et.a ppen dChi ld(d ocum ent. getE leme ntBy Id(i d));
e.preventDefault();
}
< td align=” center” width=” 100″ id=” blue” οndrοp=” dropIt(this, event)” οndragenter=” return false” οndragοver=” return false” > …. < /td>
< span draggable=” true” id=” t_1″ οndragstart=” dragIt(this, event)” > < img src=” http s:// www. ibm. com/ deve lope rwor ks/m ydev elop erwo rks/ blog s/bo blea h/re sour ce/t ower .jpg “ > < /span>
原文链接: