其实html5就是新增一些有用的api
让我们更轻松的开发
从而把更多精力都放在业务逻辑上来
这些api的使用也非常简单
不过我的记性不太好
所以还是以博客的形式记录下来（手动滑稽）
今天就来写一下这个拖拽api
默认拖拽说起拖放，其实最早实现拖放功能的还是ie（ie4）
h5就是在ie实例的基础上指定的拖拽规范
在浏览器中，是有默认拖拽的
比如说图片的拖拽
选中文本的拖拽
链接的拖拽
元素拖拽浏览器默认允许我们拖拽图像、文本以及链接
让其它元素被拖动也是可以实现的
只需要在元素标签上添加一个属性
<p draggable="true"></p>
当拖拽这个元素的时候，浏览器就会以半透明复本的方式显示
拖拽事件拖拽事件应该分为两类
一类是被拖拽元素触发的事件
另一类是拖放目标元素触发的事件
<p id="source" draggable="true"></p><p id="target"></p> <!-- 样式略 -->
var source = document.getelementbyid('source');var target = document.getelementbyid('target');
拖拽元素拖拽元素的时候，被拖拽元素会触发以下事件
dragstart
drag
dragend
当鼠标点中元素并且开始移动时，就会触发dragstart事件（类比mousedown）
拖拽过程中会持续不断地触发drag事件（类比mousemove）
松开鼠标取消拖拽时就会触发dragend事件（类比mouseup）
source.ondragstart = function(){
console.log('开始拖拽');
}source.ondrag = function(){
console.log('拖拽中');
}source.ondragend = function(){
console.log('拖拽结束');
}
目标元素当拖拽的元素拖到一个目标元素上时，目标元素会触发以下事件
dragenter
dragover
dragleave
drop
拖拽元素到目标上，就会触发dragenter事件（类比mouseover）
当拖动元素在目标元素中，就会持续触发dragover事件
离开目标元素，触发dragleave事件（类比mouseout）
若拖放元素到了目标元素中（在目标元素中松开鼠标），就会触发drop事件而不会触发dragleave事件
target.ondragenter = function(){
console.log('拖动进入目标元素');
}target.ondragover = function(){
console.log('目标元素中拖拽');
}target.ondragleave = function(){
console.log('拖动离开目标元素');
}target.ondrop = function(){
console.log('拖放');
}
这时我们会发现元素拖放到目标元素中时
并没有触发drop事件
我们看到了一个特殊的光标（圆环+反斜线）
意思就是无效的拖放
所以导致没有触发drop事件
也就是说元素默认是不能够拖放
只要我们在目标元素的dragover事件中取消默认事件就可以解决问题
target.ondragover = function(e){
console.log('目标元素中拖拽');
e.preventdefault(); //增}
数据交换只是简单的拖放毫无意义
我们需要进行数据交换
而这个用语数据交换的对象就是事件对象的属性datatransfer
datatransfer的两个核心方法是setdata()和getdata()
setdata()用于设置数据，getdata()用语接收数据
event.datatransfer.setdata('text','some text');
var text = event.datatransfer.getdata('text');//保存在datatransfer中的数据只能在drop事件处理函数中处理
如果我们拖拽了选中文本
那么浏览器默认就会调用datatransfer.setdata，设置对应文本数据
setdata()和getdata()就是数据类型的字符串
ie定义的数据类型除了“text”文本类型还有“url”
h5对它进行了扩展，可以指定各种mime类型
但为了向后兼容，它同样支持“text”和“url”
它们会被分别映射为“text/plain”和“text/uri-list”
如果数据保存为url，浏览器会做特殊处理，把它当成网页链接
（所以拖拽链接到另外的浏览器窗口就会打开网页）
必要的话，我们可以手动保存需要传输的数据
var source = document.getelementbyid('source');var target = document.getelementbyid('target');
source.ondragstart = function(e){
e.datatransfer.setdata('text','传递文本数据');
}
target.ondragover = function(e){
e.preventdefault();
}
target.ondrop = function(e){
console.log(e.datatransfer.getdata('text'));
}
拖拽设置在datatransfer中还有两个重要的属性
dropeffect和effectallowed
dropeffectdropeffect属性值为字符串，表示被拖动元素可以执行哪一种放置行为
要使用这个属性，必须在dragenter事件处理函数中设置
none 不能把元素拖放至此（除文本框外全部元素的默认值）
move 移动到目标
copy 复制到目标
link 目标打开拖动元素（拖动元素必须是链接并有url）
effectallowedeffectallowed属性值也是字符串，表示允许拖动元素哪种dropeffect
要使用这个属性，必须在dragst事件处理函数中设置
uninitialized 没有设置任何拖放行为
none 不能由任何行为
copy 仅允许dropeffect值为copy
link 仅允许dropeffect值为link
move 仅允许dropeffect值为move
copylink 允许dropeffect值为copy和link
copymove 允许dropeffect值为copy和move
linkmove 允许dropeffect值为link和move
all 允许任意dropeffect
以上就是html5元素拖拽drag与拖放drop相关api的具体介绍（图文）的详细内容。