HTML 5 基础教程

HTML是超文本标记语言，是一种专门用来制作网页的语言，而HTML5就是它的第五个版本，2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成，该标准针对当前互联网的飞速发展制定了更加标准的网页语言规范及适用功能，同时也给我们开发者带来了更多的开发选择，学习它是每个前端开发者必修的课程。

W3CAPI

2020-06-15 06:59:35

文档目录

我的书签

请登录

HTML5 拖放简介

一、什么是拖放（Drag 和 drop）？

拖放（Drag 和 drop）在WEB软件应用中是一种常见的操作，就是用户可以用鼠标点击对象以后拖到另一个位置。

拖放是HTML5 标准中的一部分，任何标签元素都能够被拖放。

二、为什么需要拖放？

在WEB应用开发中，可能需要针对页面中的某个对象：图片、文字、容器等，进行位置的移动来实现自定义的布局
常见的拖放应用一：电商平台中的商家店铺装修，这个时候电商平台会提供多个可以拖动的模块，商家可以根据自己设计的页面布局将这些模块进行拖动布局
常见的拖放应用二：后台管理系统中模块的摆放，在复杂的后台管理系统中，往往有的页面中会展示很多的数据展示模块：会员统计、订单统计、员工统计、待办事项、常用操作等等，这些模块的摆放一般有一个初始默认位置，各种角色的管理员可以根据自己的喜好来将这些模块按照自己的习惯进行拖动摆放
在HTML5 之前，我们要想实现针对页面中的标签元素的移动和拖放，没有一个统一的操作标准，一般都是监听鼠标点击事件、鼠标移动事件然后配合 DOM对标签元素的操作来实现

三、HTML5 拖放（Drag 和 drop）的浏览器兼容

Internet Explorer 9+、Firefox、Opera、Chrome 和 Safari 都支持拖动。注：Safari 5.1.2不支持拖动

作者文档