文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

H5拖放技术有哪些语法

2024-04-02 19:55

关注

这篇“H5拖放技术有哪些语法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“H5拖放技术有哪些语法”文章吧。

  提到拖拽,我们都很熟悉,那么拖放呢?一字之差,代表的意义是不一样的,拖拽就是拉着走,拖放就是有拖,有放,我们都知道原生 JS 拖拽效果的缺点:

  1. 代码相对复杂与冗余

  2. 仅限于在浏览器内的元素间拖放

  3、不能实现跨页面的拖放

  所以H5就出现了拖放技术,与 JS 原生相比 HTML5 拖放的优势:

  H5拖放技术,drag&drop,对于浏览器的支持性:

  Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注:在 Safari 5.1.2 中不支持拖放。

  那么它有哪些api语法,我们来看一下:

  1、draggable 属性

  通过 draggable 告诉浏览器哪些元素需要实现拖拽功能。有三个可选值:

  true: 元素可以被拖拽

  false:元素不能被拖拽

  auto:浏览器自己判断元素是否能被拖拽 ( 默认 )

  2、对象拖放事件

  dragstart:按下鼠标键并开始移动时触发

  drag:在元素拖拽过程中持续触发----相似与mousemove

  dragend:元素拖拽停止时触发

  3、投放区事件流程

  元素被拖动到有效的放置目标时,下列事件会依次发生:

  1). dragenter:当拖拽对象进入投放区时触发

  2). dragover :拖拽对象在投放区内移动时持续触发

  3). dragleave:元素被拖出了投放区时触发

  4). drop:拖拽对象投放在投放区时触发

  虽然所有元素都支持放置目标事件,但这些元素默认是不允许放置的,需要重写事件的默认行为,例如:

  在ondragover中一定要执行 preventDefault()否则ondrop事件不会被触发

  4、dataTransfer 对象--常用方法

  setDragImage (图标,图标距指针X轴偏移值,Y轴偏移值 )

  指定一个图标,当拖动发生时,显示在光标下方

  5、dataTransfer 对象--常用属性:

  dropEffect 表示被拖动的元素能够执行哪种放置行为

  可能的值:

  “none” : 不能把拖动的元素放在这里

  “move”: 把拖动的元素移动到放置目标

  “copy”: 把拖动的元素复制到放置目标

  “link”: 放置目标会打开拖动的元素(有URL)

  effectAllowed 允许拖动元素的哪种dropEffect

  允许值:

  “copyLink” : 允许值为 copy 和 link 的 dropEffect

  “copyMove”: 允许值为 copy 和 move 的 dropEffect

  “linkMove” : 允许值为 link和 move 的 dropEffect

  “all” : 允许任意的 dropEffect

  注意:dropEffect属性搭配effectAllowed属性使用在dragstart事件处理程序中设置effectAllowed属性在dragover事件处理程序中设置dropEffect属性dropEffect 的每个可能值都会导致光标显示为不同的符号

  6、files文件

  dataTransfer.files:如果是拖放文件,则返回正在拖放的文件列表FileList

  FileReader:专门用于读取文件,FileReader 接口提供一些读取文件的方法与一个包含读取结果的事件模型

  FileReader.readAsDataURL方法:参数为要读取的文件对象,将文件读取为DataUrl

  FileReader.事件:当读取文件成功完成的时候触发此事件,在事件触发后,你可以通过this.result来获取读取的文件数据,如果是图片,将返回格式的图片数据。

以上就是关于“H5拖放技术有哪些语法”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯