拖放（HTML5)

开始巩固HTML的基础，然后就开始从HTML5开始学。

之所以比较重视这个拖放，是因为在找工作的时候，忘了是哪个公司了，有一个编程题涉及拖放。

一、涉及到的事件

虽然区分了拖动对象和容器盒子，但是，有的是两个都可以添加的，但是执行顺序有先后）

1.被拖动的对象

(1)ondragstart：源对象开始被拖动

(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)

(3)ondragend：源对象被拖动结束（虽然是被拖动对象的事件，但目标对象内也可以写，但会先执行被拖动对象的）

2.目标对象（放进去的框框）

(1)ondragenter：目标对象被源对象拖动着进入（也可以写在被拖动对象内，因为被移动对象在放入其他元素内之前也是一个元素，也可以被进入）

(2)ondragover：目标对象被源对象拖动着悬停在上方

(3)ondragleave：源对象拖动着离开了目标对象

(4)ondrop：源对象拖动着在目标对象上方释放/松手

二、我的代码

1.html

2.css

3.js

三、看下效果吧

1.一开始的效果

左边的红色大盒子为box1，右边绿色大盒子为box2，黑色框为box5。

2.box3进入box4

（这里说的进入，是指鼠标的位置，以鼠标的位置为准）

移动box3，当其进入box4时，可以看到下面先输出进入4，又输出离开3。也就是先执行ondragenter，后执行ondragleave.

3.box3穿过box4，后进入box2，但未进入box5

4.在box2范围内，非box5内松手

先执行被拖动对象的ondragend。

5.移动完box3，再移动box4，从下面进入box5

6.再将box3，放回box1

 

四、总结一下

1.要给被拖动对象设置 draggable="true"

2.给ondragstart事件设置

3.给ondragover事件设置

4.给ondrop事件设置

利用setDate和getDate来做数据的传递。

然后在这个事件中让容器盒子添加新元素。

五、补充

可以看下《HTML5--拖拽API(含超经典例子)》这篇文章，这篇文章的最后有涉及将文件拖拽到网页的内容。还没实践过，但觉得不错。