拖放API
源元素 - 被拖拽的元素

• 源元素事件
  • dragstart事件 - 表示开始拖拽 * 该事件只能被触发一次
  • drag事件 - 表示拖拽过程中 * 该事件可以被触发多次
  • dragend事件 - 表示结束拖拽 * 该事件只能被触发一次
    目标元素 - 投放到的元素
• 目标元素事件
  • dragenter事件 - 表示源元素到达目标元素* 该事件只能被触发一次
  • dragover事件 - 表示源元素到达目标元素 该事件允许被触发多次 该事件是必要绑定事件 * 该事件中阻止浏览器默认行为,可以触发 drop 事件 event.preventDefault();
  • drop事件 - 表示源元素被投放到目标元素 默认情况下,不会被触发 触发
    该事件的话 * 必须在 dragover 事件中,阻止默认行为
  • dragleave事件 - 表示源元素到达目标元素后,离开了目标元素 * 该事件只能被触发一次
  • dataTransfer对象 作用 - 充当源元素与目标元素之间的数据中转站 获取 - 该对象被集成在event事件对象中 event.dataTransfer
• 属性
  • files - 获取对应文件列表
  • items - 获取对应元素列表
  • types -
  • 方法
  • setData(type,data)方法 * 参数
  • type - 设置当前数据的类型(标识-唯一)
  • data - 向dataTransfer对象设置的数据内容 作用 - 向dataTransfer对象存储数据 getData(type)方法 * 参数
  • type - 获取当前数据的类型(标识-唯一) * 作用 - 从dataTransfer对象获取指定数据
  • clearData()方法 作用 - 清空dataTransfer对象中所有存储的数据内容
    拖放实现效果
    • 在同一页面中实现拖放效果 将本地文件拖拽到HTML页面中
      开放第三方服务
    • JavaScript库 - jQuery * 更像是工具 - 降低工作难度
• JavaScript框架 - Bootstrap * 更像是解决方案 - 没有最优
• 第三方服务 * 百度地图 - 集成在Web应用
  对象定义的三种方式
• 直接量(字面量) - JSON格式 { 属性名 : 属性值, 方法名 : function(){} }
• 继承Object对象 new Object();
• 构造函数 function OBJECT(){ this.属性名 = 属性值; this.方法名 = function(){} }