H5新特性 - 拖拽属性

拖拽属性

拖拽属性

H5的新特性 : 是指鼠标点击源对象之后，不松手将其拖拽到目标对象，或半途松手(释放)的过程

拖拽 Drag

源对象：指定的鼠标点击的一个事物，例如：一个元素，一个图片等
目标对象：指定是我们拖动源对象后，预计要进入的区域

被拖动的源对象可以触发的方法

ondragstart: 源对象开始被拖动
ondrag: 被拖动过程中
ondragend: 源对象被拖动结束

源对象进入目标对象可以触发的事件

ondragenter：源对象进入目标对象时触发
ondragover: 源对象悬停在目标对象上方时触发
ondragleave:源对象被拖动着离开目标对象时触发
ondrop: 源对象在目标对象上松手时触发

拖拽属性一共就是这7个方法
功能：用于在源对象和目标对象之间传递数据

setData( ): 设置数据参数是 key 和 value(value必须是字符串)
getData( ):获取数据，参数是key 。通过key去获取对应的value值

dataTransfer 注意：

dataTransfer的传输数据必须为字符串类型，所以需要转化数据类型，那么就要使用到JSON方法

// 使用JSON对象中的方法 转换 字符串和对象的数据类型var str = new String();var obj = {};// JSON.stringify(对象)：可以将对象类型 转换为字符串类型console.log(typeof JSON.stringify(obj));//JSON.parse(字符串)：可以将字符串类型  转换为对象类型console.log(typeof JSON.parse(str));

注意！！

标签中自带的属性： draggable 是否可以拖拽，默认值 false

// 例：// 切记开启draggable属性<div class="box" draggable="true"></div><script type="text/javascript">var box = document.getElementsByClassName("box")[0];// 定义全局变量，存储鼠标的位置              var offsetX;var offsetY;// 开始拖动时box.ondragstart = function(ev){    // 获取鼠标在元素上的位置          offsetX = ev.offsetX;offsetY = ev.offsetY;            }// 源对象被拖动时 box.ondrag = function(ev){         var x = ev.clientX;var y = ev.clientY;// drag事件最后一刻，无法读取鼠标的坐标， x 和 y 都会变成0  if (x == 0 || y == 0) {return false; // 直接结束，不赋值给元素}x -= offsetX;y -= offsetY;this.style.left = x + "px";this.style.top = y + "px";}// 拖动结束时box.ondragend = function(){console.log(1)}</script>

H5新特性 - 拖拽属性相关推荐

前端面试题二：ES6/7/8新特性、性能优化、数据交互、H5新特性
目录一.ES6/7/8新特性二.性能优化三.数据交互四.H5新特性一.ES6/7/8新特性 1.ES6中新增了哪些数据类型? Symbol类型(基本) Set类型(复杂) Map类型(复杂) ...
【面试】面试官：说一说H5新特性
H5 新特性 1.拖拽释放(Drap and drop) API ondrop拖放是一种常见的特性,即抓取对象以后拖到另一个位置在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放 2.自定义 ...
html5长按排序,H5 长按拖拽排序的实现
H5 长按拖拽排序产品需求: H5页面的一个列表,需要长按之后然后拖拽排序; vuedraggable是vue生态圈中一个知名的组件,也是vue.js项目中处理拖拽问题的不二法宝; 它基于Sort ...
html5新特性表单控件,老生常谈h5新特性1:(表单)
老生常谈h5新特性1:(表单) HTML5新特性 -- 十大新特性 (1)新的语义标签和属性 (2)表单新特性 (3)视频和音频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放A ...
前端16天--IFC、BFC、H5新特性、选择器、伪类元素、扩展盒模型、圆角、盒子阴影等--2021/4/21
前端16天–IFC.BFC.H5新特性–2021/4/21 HTML5是HTML标准的最新演进版本: 1.是一个新的HTML语言版本包含了新的元素.属性和行为. 2.同时包含了一系列可以被用来让web ...
H5新特性（一）——音视频标签
H5新特性--音视频标签大家都有在网页中浏览音频和视频的经历,在HTML5之前,对视频和音频没有一个标准,因此在网页中看到的视频,都是通过第三插件的方式嵌入的,可能是QuickTime,也可能是 R ...
h5新特性DOMAST的简单理解
h5新特性 1.一些语义化标签 header.footer.nav.aside.article.section.hgroup(h1~h6的集合) document.createElement('hea ...
H5新特性有哪些？怎么理解语义化
H5新增了很多新的特性,这也成了我们面试的时候面试官喜欢问的一个问题,那我们可能在开发的过程中如果没有去关注过那也不是很清楚用到的是不是H5的新特性,下面我们就来讲一下 H5十大新特性 1.语义化标签 ...
原生JS的拖拽属性draggable（详解）
摘要作为h5新增的属性draggable,它能够给与一切的html元素拖动的效果.而在这个属性之下,也有着关于拖动效果的各个方法. 而这一篇文章,主要就是说一下关于draggable属性的使用以及工 ...

H5新特性 - 拖拽属性

拖拽属性

H5新特性 - 拖拽属性相关推荐

最新文章

热门文章