本文介绍如何利用HTML5的拖放API简化网页元素拖动操作的实现。通过一个实例，展示了如何创建一个允许用户将图片从相册拖到垃圾箱的页面，同时在拖动过程中提供实时提示。拖放API包括设置draggable属性、处理ondragstart、ondrag、ondragend、ondragenter、ondragover和ondrop事件。
HTML5之前，要实现网页元素的拖动操作，需要依靠mousedown、mousemove、mouseup等API，通过大量的JS代码来实现；HTML5 中引入了直接支持拖动操作的API，大大简化了网页元素的拖动操作编程难度，并且这些API除了支持浏览器内部元素的拖动外，同时支持浏览器和其它应用程序之间的数据互相拖动。
本文通过一个简单示例，演示HTML5中拖动API的使用方法。
场景：
如下图所示，我们要实现：
通过拖动将照片从左侧“相册”区域拖拽到右侧“垃圾箱”区域；可以500%提高开发效率的前端UI框架！
拖拽过程中，“温馨提示”部分要及时提醒，当前正在进行拖动操作；
实现方法：
如上界面的HTML代码比较简单，如下： 可以500%提高开发效率的前端UI框架！
.代码
最低0.47元/天 解锁文章
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
