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()用语接收数据

1 2	`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'));
}