详讲H5-拖放（原生js将图片拖放另外一个元素里）

今天，一个朋友让我帮他写个拖放图片的事件，所以就把这些知识又重新回忆了一遍。趁着现在还熟练，写出来跟大家分享

首先，给大家列个目录，方便不懂的小白能看懂。（ps：这里是先引导大家，告诉大家一些原理，对象，方法。结尾会附完整的js，只要你们直接复制就可以在浏览器看结果。大家也可以根据这个自己写个拼图游戏玩哦，很简单的）

1：什么是拖放？

1：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放

2：元素的可拖放

2： draggable 属性设置为 true     <img draggable="true">

3：元素中的拖放事件

3：通过拖放事件，可以控制拖放相关的各个方面。其中最关键的地方在于确定那里发生了拖放事件，有些事件是在被拖动的元素上触发的，而有些事件是在放置目标上触发的。拖动某些元素时，将一次触发下列事件：ondragstart、ondrag、ondragend。

按下鼠标键并开始移动鼠标时，会在被拖放的元素上触发dragstart事件。
触发dragstart事件后，随即会触发drag事件，而且在元素被拖动期间会持续发送该事件。
当拖动停止时（无论是把元素放到了有效的放置目标，还是放到了无效的放置目标上），会触发dragend事件。

ondragenter、ondragover、ondragleave、ondrop

只要元素被拖动到放置目标上，就会触发dragenter事件（类似于mouseover事件）。
紧随其后的是dragover事件，而且被拖动的元素还在放置目标的范围内移动时，就会持续触发该事件。
如果元素被拖出了放置目标，dragover事件不再发生，但会触发dragleave事件（类似于mouseout事件）。
如果元素被放到了放置目标中，则会触发drop事件而不是dragleave事件。

4：dataTransfer对象（ps：这个属性，是通过监听事件得来的，一会例子中会告诉大家怎么弄）

4：dataTransfer对象，它是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。因为它是事件对象的属性，所以只能在拖放事件的事件处理程序中访问dataTransfer对象。
dataTransfer对象有两个主要方法： getData()和setData()。（ps：这两个值也是通过监听得来的）
getData()可以取得由setData()保存的值。
setData()方法的第一个参数，也是getDAta()方法唯一的一个参数，是一个字符串，表示保存的数据类型，取值为”text”或“URL”，
如下所示：

//设置和接收文本数据
event.dataTransfer.setData("text","some text");
var text = event.dataTransfer.getData("text");
//设置和接收URL
event.dataTransfer.setData("URL","http://blog.csdn.net/zhaohaixin0418");

5：event.preventDefault()

4：默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式，所以会用此方法。

6：简单拖放常用事件与方法

4：ondragstart
4：ondragover
4：ondrop
4：dataTransfer.getData()/setData()
4：event.preventDefault()

这大概就是拖放事件涉及到的一些知识点。接下来，我们说拖放图片的事例。要求是这样的：有两个body里面有两个空div，几张img。我们要实现的是让图片可以随意拖放进入div里面，img在div里面可以随便更改位置。在这里，我们用到的不仅是拖放事件，而且，我们还会用到event事件。

body里面需要写：

<div