拖放事件

#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拖放的更多相关文章

  1. Draggabilly – 轻松实现拖放功能(Drag & Drop)

    Draggabilly 是一个很小的 JavaScript 库,专注于拖放功能.只需要简单的设置参数就可以在你的网站用添加拖放功能.兼容 IE8+ 浏览器,支持多点触摸.可以灵活绑定事件,支持 Req ...

  2. Android开发之Drag&Drop框架实现拖放手势

    Android3.0提供了drag/drop框架,利用此框架可以实现使用拖放手势将一个view拖放到当前布局中的另外一个view中.本文将介绍如何使用拖放框架. 一.实现拖放的步骤 首先,我们先了解一 ...

  3. HTML5中的拖拽与拖放(drag&&drop)

    1.drag 当拖动某个元素时,将会依次触发下列事件: 1)dragstart:按下鼠标键并开始移动鼠标时,会触发该事件 2)drag:dragstart触发后,随即便触发drag事件,而且在元素被拖 ...

  4. 《JavaScript 实战》:实现拖放(Drag & Drop)效果

    拖放效果,也叫拖拽.拖动,学名Drag-and-drop ,是最常见的js特效之一.如果忽略很多细节,实现起来很简单,但往往细节才是难点所在.这个程序的原型是在做图片切割效果的时候做出来的,那时参考了 ...

  5. HTML 学习笔记 (drag & drop)

    拖放(Drag & Drop)是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.过去,我们用监听鼠标的Mousedown.Mouseo ...

  6. HTML5魔法堂:全面理解Drag & Drop API

    一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...

  7. Win10/UWP新特性—Drag&Drop 拖出元素到其他App

    在以前的文章中,写过微软新特性Drag&Drop,当时可能由于处于Win10预览版,使用的VS也是预览版,只实现了从桌面拖拽文件到UWP App中,没能实现从UWP拖拽元素到Desktop A ...

  8. Android drag drop

    最近偶尔知道了锤子的one step,所以在网上看相关的东西,有人说android原生drag drop就能实现,我就去学习一下这个drag drop,下面把学习到的东西总结一下: drag drop ...

  9. Android -- Drag&&Drop

    Android3.0提供了drag/drop框架,利用此框架可以实现使用拖放手势将一个view拖放到当前布局中的另外一个view中. 实现拖放的步骤 首先,我们先了解一下拖放过程,从官方文档可以知道, ...

随机推荐

  1. springboot同一项目部署多实例

    添加 -Dserver.port=xxxx 将配置文件放在nacos注册中心时,要记得在启动第二个实例记得把原来端口注释掉,如果配置文件在本地就不必注释掉了

  2. 【深度分析】:阿里,腾讯面试题 SpringBoot整合Spring MVC

    Java学习总结 SpringBoot整合Spring MVC 1.SpringMVC概述 MVC(Model–view–controller)是软件工程中的一种软件架构模式,基于此模式把软件系统分为 ...

  3. Mac插件太多太乱怎么办?CleanMyMac直接帮你搞定!

    电脑应用插件在一定程度上便利了大家的生活,保障了用户的使用安全,比如Flash插件.浏览器翻译插件.银行安全登录插件等等.但是许多的插件并不能定位安装的位置,同时部分插件,大部分时候都是只使用一次的, ...

  4. FL studio系列教程(十二):FL Studio中如何导出音频

    在FL Studio中制作好音乐后,最后展现给我们的是一般的音频文件,我们可以通过FL Studio的文件菜单导出最终的文件格式.下面我们就来详细的看一下FL Studio中是如何导出我们想要的音频格 ...

  5. redlock分布式锁真的安全吗

    此文是对http://zhangtielei.com/posts/blog-redlock-reasoning-part2.html文章的个人归纳,如有问题请联系删除 什么是redlock redlo ...

  6. 一看就懂的:MySQL数据页以及页分裂机制

    文章公号 首发!连载中~ 欢迎各位大佬关注, 回复:"抽奖" 还可参加抽活动 文末有二维码 一.知识回顾 回顾一下之前和大家分享的知识点 看了前面的文章,想必你肯定了解了什么是Bu ...

  7. java NIO 随笔

    一,NIO入门    NIO 是new io的缩写,说实话,nio api比较难用,所用大家需要采用网络通信的时候,普通首先想到的是netty,不直接使用NIO,但是你不了解NIO,说实话,你也理解不 ...

  8. 【鸿蒙开发板试用报告】用OLED板实现FlappyBird小游戏(中)

    小伙伴们久等了,在上一篇<[开发板试用报告]用OLED板实现FlappyBird小游戏(上)>中,我们本着拿来主义的原则,成功的让小鸟在OLED屏幕上自由飞翔起来,下面我们将加入按钮交互功 ...

  9. 做IT需要掌握的电力基础知识

    电流 损耗 直流电的传输损耗大,所以不适合长距离传输, 交流电的传输损耗小,所以适合长距离传输, 使用 直流电电压稳定,无白躁声,故适於电子产品使用(例如电视机,收音机电脑等), 交流电要经过整流/开 ...

  10. How tomcat works(深入剖析tomcat)阅读笔记1-4章

    How tomcat works chapter 1 简单的web服务器 这一张的主要内容就是实现一个简单的静态资源服务器,socket编程,利用java提供的socket和serverSocket编 ...