专栏首页web前端教室HTML 5 - draggable属性讲解

HTML 5 - draggable属性讲解

本例知识点

1、首先,为了使元素可拖动,把 draggable 属性设置为 true :

2、ondragstart - 用户开始拖动元素时触发

3、ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

4、ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

5、dataTransfer对象是事件对象的一个属性,用于从被拖拽元素相放置目标传递字符串格式的数据。

6、dataTransfer对象有两个主要的方法:getData()方法和setData()方法。

重点

本想应用 draggable制作一个移动端的demo,但发现dataTransfer是鼠标事件的属性。

而移动端只有touch事件,touch根本就没有dataTransfer,自然也就没有getData()和setData()方法了。

所以目前看来,如果想制作移动端的h5拖动应用,dataTransfer肯定是用不了了。

而draggable在移动端貌似也没有起作用。

我个人感觉,dataTransfer和localStorage 很相似,都是在本地保存一些数据。

不同之处在于,dataTransfer只用于从被拖拽元素向 放置目标元素 传递字符串格式的数据。

而localStorage 则完全是本地存储了,关于它的知识以后会讲到。

另,关于这一块的知识,如果哪位同学有更多理解,欢迎留言。

draggable属性视频教程:

视频链接:https://v.qq.com/iframe/player.html?vid=a0165rph1k7&width=670&height=502.5&auto=0

本文分享自微信公众号 - web前端教室(webfeel),作者:web前端教室

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-09-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2018年的四大热门VueJs项目

    从我个人主观的讲课与开发体验来讲,我更喜欢VueJs,因为相对于ReactJs来比较,vue的许多开发细节都更简练,更贴近业务逻辑,下面是github上的十个比...

    web前端教室
  • 【从零开始】用vuejs做一个简陋但好使的播放器(一)

    今天突然想用vueJs做一个播放器。网上有许多现成的,但我又懒得去看别人的代码。怎么办呢?先【从零开始】做一个最简单的吧。 <!-- 一、需求 --> 用vue...

    web前端教室
  • 会员提问 之 JS中的私有方法有什么意义?

    先说结论, (1)JavaScript没有私有方法。 (2)JavaScript的私有方法都是通过“作用域”来实现的。 (3)有没有用?有没有意义?肯定有! 什...

    web前端教室
  • Linux debug问题

    命令行解决方法:go build -tags nopkcs11 LiteIDE解决办法:编译环境-》自定义-》BUILDARGS:-i -tags nopkc...

    用户2187945
  • C# 对象哈希码

    FCL的设计者认为,如果能将任何对象的任何实例放到哈希集合中,能带来很多好处。为此,System.Object提供了GetHashCode,它能获取任何对象的I...

    郑小超.
  • 【犀牛鸟论道】深度哈希方法及其在移动视觉搜索中的应用

    1. 简介 移动视觉搜索技术是多媒体搜索领域中一个前沿的研究课题。近年来,移动设备的飞速发展,改变了互联网上图像和视频等视觉内容的产生,以及人们检索和观看的方式...

    腾讯高校合作
  • Flutter完整开发实战详解(十二、全面深入理解状态管理设计)

    在所有 响应式编程 中,状态管理一直老生常谈的话题,而在 Flutter 中,目前主流的有 scope_model 、BloC 设计模式 、flutter_re...

    恋猫
  • Docker Hub工作流程-Docker for Web Developers(6)

    在Github上创建项目仓库 和创建其他Github项目一样,在Github创建一个仓库,然后在仓库里面增加一个dockerfile,然后提交并推送到Githu...

    八哥
  • 通过欧拉计划学习Rust编程(第17~21题)

    最近想学习Libra数字货币的MOVE语言,发现它是用Rust编写的,所以先补一下Rust的基础知识。学习了一段时间,发现Rust的学习曲线非常陡峭,不过仍有快...

    申龙斌
  • async 和 await 之异步编程的学习

          async修改一个方法,表示其为异步方法。而await表示等待一个异步任务的执行。js方面,在es7中开始得以支持;而.net在c#5.0开始支持。...

    sam dragon

扫码关注云+社区

领取腾讯云代金券