html5 拖拽(drag)和f放置(drop)

时间:2023-03-09 19:07:47
html5 拖拽(drag)和f放置(drop)

知识要点

  • 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 新增的拖放接口,提供了一套可以在页面中拖放的功能,

通过该功能,用户可以通过鼠标来拖动(可拖动)元素,并可以通过释放鼠标来设置这些元素(可放置)元素上。

注意:默认情况下,除了选中文本、图像、链接、其它元素都是不可拖动的