开发者学堂课程【HTML5 新特性学习：HTML5拖放】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/396/detail/5048
HTML5拖放
内容介绍：
一、拖放
二、示例
一、拖放:
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
浏览器支持:
lnternet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5支持拖放。
设置元素为可拖放:
draggable="true"
拖动什么:
ondragstart 和 setData()
放到何处
Ondragover
进行放置:
ondrop
二、示例
打开 WebStorm，创建一个 index 文件，先写一个 p 标签，然后创建一个文件夹 images ，放入拷贝的图片
<p>请拖动图片</p>
<div id = “div1”>
</div>
<img id = “drag1” src = “images/1.png” draggable = “true”>
然后创建一个 style
<style>
#div1{
width: 300px;
height: 300px;
border: 1px solid #aaabbb;
}
</style>
先来测试以下样式
当前图片是不可拖动的，接下来实现拖动
创建一个 script 标签
<script>
function allowDrop(ev) {
ev.preventDefault() ;
}
//放置
function drag(ev) {
ev.dateTransfer.setData(“Text”,ev.target.id);
}
//拖动
function drop(ev) {
ev.preventDefault() ;
var data = ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
}
</script>
在 div 标签中：
<div id = “div1” ondrop = “drop(event)” ondragover = “allowDrop(event)”>
</div>
然后在 img 中
<img id = “drag1” src = “images/1.png” draggable = “true” ondragstart = “drag(event)”>
测试发现可以拖动
