知识要点
- HTML5 (drag&drop) API (Event)
- 拖放数据(对象):DataTransfer
- 拖放内容:setData getData
- 拖放效果(动作):dropEffect、effectAllowd
- 拖放图像:setDargImage
学习目标
- 掌握html5原声拖放(drag& drop)API 与 拖放事件
- 了解拖放流程
- 学会解决拖放种的兼容
前置要求
- 原生dom操作
- 原生事件
- 默认行为(阻止默认行为)
- 事件冒泡(阻止事件冒泡)
什么是Drag与Drop?
- Drag:拖拉 拖拽
- Drop:放置 放下
在一个web页面中,选中文本,图像、链接默认是可拖拽的
当一段文本、图像或者链接或链接被拖动的时候,文本内容·图像·链接URL被设定为拖动数据。
这个功能很早就用了,但是没有提供对应接口来让我们对着种行为进行控制,Drag与Drop是html5 新增的拖放接口,提供了一套可以在页面中拖放的功能,
通过该功能,用户可以通过鼠标来拖动(可拖动)元素,并可以通过释放鼠标来设置这些元素(可放置)元素上。
注意:默认情况下,除了选中文本、图像、链接、其它元素都是不可拖动的