移动 drag&drop拖放
拖放事件
#1. 三个对象
源对象 -- 被拖放的元素
过程对象 -- 经过的元素
目标对象 -- 到达的元素
#2. 源对象中的事件
要想让某个元素可以拖拽需要设置draggable="true"
大多数的标签该属性默认值是false,但是img标签和a标签的draggable属性默认是true
dragstart 源对象开始拖放
drag 源对象拖放过程中
dragend 源对象拖放结束
#3. 过程对象中的事件
dragenter 源对象开始进入过程对象范围( 鼠标进入 )
dragover 源对象在过程对象范围内移动
dragleave 源对象离开过程对象范围
#4. 目标对象
drop 源对象被拖放到目标对象内
==++pay attention to ! ! !++==
- 页面中的元素默认都是过程对象
- 过程对象的dragover事件有一个默认行为!!!
- 那就是当dragover触发时,drop会失效!!!!
- 所以需要阻止dragover的默认行为才能触发drop
#5. 简单拖放步骤
1. 将源对象draggable属性值置为true,允许元素可拖放
2. 给源对象绑定开始拖放事件,规定当元素被拖动时会发生什么
3. 给过程对象绑定拖动经过事件,规定经过过程对象时会发生什么
4. 阻止目标对象的dragover事件的默认行为
5. 给目标对象绑定(drop)事件 ,规定放开后会发生什么
#二、dataTransfer
==dataTransfer== 是拖放事件对象中的属性,该属性用于源对象和目标对象之间的数据传输。==数据类型不区分大小写==。
1. 在源对象里面存储数据 e.dataTransfer.setData("数据类型","值")
2. 在目标对象里面获取数据 e.dataTransfer.getData("数据类型")
3. 在源对象里面清除数据 e.dataTransfer.clearData("数据类型(可省,省则清除所有)")
4. effectAllowed 和 dropEffect 这两个属性结合起来设置拖放的视觉效果 copy、link、move
5. e.dataTransfer.setDragImage(img,100,100);
第一个参数:img对象
第二个参数:鼠标相对于图片的x方向偏移量
第三个参数:鼠标相对于图片的y方向偏移量
移动 drag&drop拖放的更多相关文章
- Draggabilly – 轻松实现拖放功能(Drag & Drop)
Draggabilly 是一个很小的 JavaScript 库,专注于拖放功能.只需要简单的设置参数就可以在你的网站用添加拖放功能.兼容 IE8+ 浏览器,支持多点触摸.可以灵活绑定事件,支持 Req ...
- Android开发之Drag&Drop框架实现拖放手势
Android3.0提供了drag/drop框架,利用此框架可以实现使用拖放手势将一个view拖放到当前布局中的另外一个view中.本文将介绍如何使用拖放框架. 一.实现拖放的步骤 首先,我们先了解一 ...
- HTML5中的拖拽与拖放(drag&&drop)
1.drag 当拖动某个元素时,将会依次触发下列事件: 1)dragstart:按下鼠标键并开始移动鼠标时,会触发该事件 2)drag:dragstart触发后,随即便触发drag事件,而且在元素被拖 ...
- 《JavaScript 实战》:实现拖放(Drag & Drop)效果
拖放效果,也叫拖拽.拖动,学名Drag-and-drop ,是最常见的js特效之一.如果忽略很多细节,实现起来很简单,但往往细节才是难点所在.这个程序的原型是在做图片切割效果的时候做出来的,那时参考了 ...
- HTML 学习笔记 (drag & drop)
拖放(Drag & Drop)是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.过去,我们用监听鼠标的Mousedown.Mouseo ...
- HTML5魔法堂:全面理解Drag & Drop API
一.前言 在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...
- Win10/UWP新特性—Drag&Drop 拖出元素到其他App
在以前的文章中,写过微软新特性Drag&Drop,当时可能由于处于Win10预览版,使用的VS也是预览版,只实现了从桌面拖拽文件到UWP App中,没能实现从UWP拖拽元素到Desktop A ...
- Android drag drop
最近偶尔知道了锤子的one step,所以在网上看相关的东西,有人说android原生drag drop就能实现,我就去学习一下这个drag drop,下面把学习到的东西总结一下: drag drop ...
- Android -- Drag&&Drop
Android3.0提供了drag/drop框架,利用此框架可以实现使用拖放手势将一个view拖放到当前布局中的另外一个view中. 实现拖放的步骤 首先,我们先了解一下拖放过程,从官方文档可以知道, ...
随机推荐
- springboot同一项目部署多实例
添加 -Dserver.port=xxxx 将配置文件放在nacos注册中心时,要记得在启动第二个实例记得把原来端口注释掉,如果配置文件在本地就不必注释掉了
- 【深度分析】:阿里,腾讯面试题 SpringBoot整合Spring MVC
Java学习总结 SpringBoot整合Spring MVC 1.SpringMVC概述 MVC(Model–view–controller)是软件工程中的一种软件架构模式,基于此模式把软件系统分为 ...
- Mac插件太多太乱怎么办?CleanMyMac直接帮你搞定!
电脑应用插件在一定程度上便利了大家的生活,保障了用户的使用安全,比如Flash插件.浏览器翻译插件.银行安全登录插件等等.但是许多的插件并不能定位安装的位置,同时部分插件,大部分时候都是只使用一次的, ...
- FL studio系列教程(十二):FL Studio中如何导出音频
在FL Studio中制作好音乐后,最后展现给我们的是一般的音频文件,我们可以通过FL Studio的文件菜单导出最终的文件格式.下面我们就来详细的看一下FL Studio中是如何导出我们想要的音频格 ...
- redlock分布式锁真的安全吗
此文是对http://zhangtielei.com/posts/blog-redlock-reasoning-part2.html文章的个人归纳,如有问题请联系删除 什么是redlock redlo ...
- 一看就懂的:MySQL数据页以及页分裂机制
文章公号 首发!连载中~ 欢迎各位大佬关注, 回复:"抽奖" 还可参加抽活动 文末有二维码 一.知识回顾 回顾一下之前和大家分享的知识点 看了前面的文章,想必你肯定了解了什么是Bu ...
- java NIO 随笔
一,NIO入门 NIO 是new io的缩写,说实话,nio api比较难用,所用大家需要采用网络通信的时候,普通首先想到的是netty,不直接使用NIO,但是你不了解NIO,说实话,你也理解不 ...
- 【鸿蒙开发板试用报告】用OLED板实现FlappyBird小游戏(中)
小伙伴们久等了,在上一篇<[开发板试用报告]用OLED板实现FlappyBird小游戏(上)>中,我们本着拿来主义的原则,成功的让小鸟在OLED屏幕上自由飞翔起来,下面我们将加入按钮交互功 ...
- 做IT需要掌握的电力基础知识
电流 损耗 直流电的传输损耗大,所以不适合长距离传输, 交流电的传输损耗小,所以适合长距离传输, 使用 直流电电压稳定,无白躁声,故适於电子产品使用(例如电视机,收音机电脑等), 交流电要经过整流/开 ...
- How tomcat works(深入剖析tomcat)阅读笔记1-4章
How tomcat works chapter 1 简单的web服务器 这一张的主要内容就是实现一个简单的静态资源服务器,socket编程,利用java提供的socket和serverSocket编 ...