继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

HTML5中的拖放API看了犀牛书写的太全了,就记录了下来。

big_person
关注TA
已关注
手记 12
粉丝 8
获赞 131

拖放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(){} }
打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP