2.7 拖放API
1 设置元素为可拖放
一般情况下，一个元素的默认拖拽属性为false。想要在页面拖拽元素，就要把属性这是为true
<img draggable = "true">
2 拖放什么? 用setData()或者ondragstart。
现在允许拖放了，那么拖拽什么?拖拽的时候会发生什么，触发什么事件?
function drag (event){ event.dataTransfer.setData("Text",event.target.id); }//dataTransfer.setData() 方法设置被拖数据的数据类型和值：
3 放置元素
现在拖放出来了，你要把元素安置到哪里去呢？这是一个问题。一般默认不能把元素放置其他元素中，如果需要，必须要对元素的默认方式进行处理。那要怎么办呢？
event.preventDefault() //通过调用 ondragover 事件的event.preventDefault()方法：
4 进行放置
现在放置到哪里我们处理了，但是缺乏一个动作事件。当放置被拖数据时，会发生 drop 事件。ondrop 属性调用了一个函数，drop(event)。
function drop(event) { event.preventDefault(); var data=event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); } //preventDefault()避免浏览器对数据的默认处理，drop事件的默认行为是以连接的形式打开 //dataTransfer.getData("Text")获取拖拽的数据，该方法将返回在setData()方法中设置为相同类型的任何数据
attention：拖拽是一个重点，需要熟练。
data Transfer。getData()只在ondrop中可以用
// 元素放置目标区域，进入目标区域触发 ondragenter 事件 ondragenter() // 进入目标区域后触发 ondragover 事件，会一直响应over事件不会触发ondrag ondragover = function(event) { event.preventDefault(); } // 元素放置目标区域，离开目标区域触发 ondragleave 事件 ondragleave() // 元素放置目标区域，鼠标弹起触发 ondrop 事件 ondrop = function(event) { // 从开始触发时 dataTransfer.setData() 获取储存的数据 // 获取dataTransfer.getData() 其他回调事件无法获取 getData() this.append(document.getElementById(event.dataTransfer.getData('xxx'))); }
