HTML5的拖放功能 - web前端技术 - 开发者的天空

查看: 1854\|回复: 10	go [HTML] HTML5的拖放功能

afrag

管理员

Rank: 75

发表于 2010-8-9 17:37 |显示全部帖子

在HTML5之前，web页面上的拖放功能是很难实现的。但是现在HTML5提供了新的功能，使得我们能够很简单的实现拖放功能，只需要几个简单的方法调用。下面让我们通过一个例子来介绍HTML5中的该功能。在这个例子中，我们创建了一个用户界面，允许用户通过拖放来将不同的网络资源放置在不同的区域中。用户可以在不同的区域中拖放资源，也可以将空闲资源拖放到指定的区域中，或通过将资源拖放到垃圾桶来删除资源。下面中是我们的例子的演示，该例子能够在FireFox3.5或以后的版本上运行。

受保护区域	防火墙	开放区域


空闲资源	垃圾桶

这个例子中，核心的方法是

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来封装图像，并定义ondragstart来实现拖放。

<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的例子。

游客，如果你要查看本帖隐藏内容请回复

回复引用

举报返回顶部

kgity

初级程序员

Rank: 1

发表于 2010-8-17 10:53 |显示全部帖子

刚好要研究一下HTML的拖曳上传功能，下过来参考一下，感谢LZ了，也8知道HTML5何时才能真正普及啊

回复引用

举报返回顶部

gasoline

初级程序员

Rank: 1

发表于 2010-11-16 22:39 |显示全部帖子

无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复无法回复

回复引用

举报返回顶部

来点难度