为了演示拖拽用例,我要创建一个简单的网络配置工具(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” ondrop=” dropIt(this, event)” ondragenter=” return false” ondragover=” return false” > …. < /td>
< span draggable=” true” id=” t_1″ ondragstart=” 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>
我的chrome6.0.496.0 dev不能实现拖拽!
没有理由啊…
Chromium 7.0.501.0 (56943) 也不能…囧..
需要在支持html5的浏览器里才可以拖拽
我用的firefox 就可以拖拽
不错,可惜好多浏览器都不支持,有待发展