详细讲解html5拖拽和拖放技术的区别及优势

提到拖拽，我们都很熟悉，那么拖放呢？一字之差，代表的意义是不一样的，拖拽就是拉着走，拖放就是有拖，有放，我们都知道原生 JS 拖拽效果的缺点：1. 代码相对复杂与冗余2. 仅限于在浏览器内的元素间拖放3、不能实现跨页面的拖放

所以H5就出现了拖放技术，与 JS 原生相比 HTML5 拖放的优势：

H5拖放技术，drag&drop，对于浏览器的支持性：

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注：在 Safari 5.1.2 中不支持拖放。

那么它有哪些api语法，我们来看一下：

1、 draggable 属性

通过 draggable 告诉浏览器哪些元素需要实现拖拽功能。有三个可选值：

true： 元素可以被拖拽

false：元素不能被拖拽

auto：浏览器自己判断元素是否能被拖拽 ( 默认 )

2、对象拖放事件

dragstart：按下鼠标键并开始移动时触发

drag：在元素拖拽过程中持续触发----相似与mousemove

dragend：元素拖拽停止时触发