拖放事件

#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. windows下mysql的远程访问和权限设置

    如果想要用户root可以远程登录,则可通过修改user表中root用户对应的host字段值为"%"即可.我们用以下语句进行修改: update user set host = '% ...

  2. 来吧,展示!Redis的分布式锁及其实现Redisson的全过程

    前言 分布式锁是控制分布式系统之间同步访问共享资源的一种方式. 在分布式系统中,常常需要协调他们的动作.如果不同的系统或是同一个系统的不同主机之间共享了一个或一组资源,那么访问这些资源的时候,往往需要 ...

  3. CA证书与https讲解

    最近面试问到这个问题,之前了解过但答的不是很好,再补充补充一下https方面的知识. 备注:以下非原创文章. CA证书与https讲解 1.什么是CA证书. ◇ 普通的介绍信 想必大伙儿都听说过介绍信 ...

  4. FL Studio中如何制作和混音警报声

    警报声在当今的许多电影配乐中,或者电子音乐的环境fx中经常出现.为了使用这种尖刺的警示声音,我们除了自己录制已有的警报声以外,也可以使用FL Studio20中的合成器和混音插件来制作属于自己的警报声 ...

  5. 利用css3实现照片列表展开小demo

    效果如下: 其实实现起来很简单,就是控制 宽 高的变化,然后给他加上transition 过度而已.觉得代码没什么难的地方,就不打注释了,如果哪里有不懂的话,可以直接评论呢. 直接上源码 html代码 ...

  6. golang实现mysql udf

    UDF(user-defined function) 当mysql提供的内置函数(count,min,max等)无法满足需求时,udf用于扩展自定义函数,满足特定查询需求. 在这里,假定一种db应用场 ...

  7. Mybatis【2.1】-- 从读取流到创建SqlSession发生了什么?

    目录 1.Resources.getResourceAsStream("mybatis.xml")到底做了什么? 2. new SqlSessionFactoryBuilder() ...

  8. Java复数的定义与描述

    1 //4.复数的定义与描述 2 package test; 3 4 import java.util.Scanner; 5 6 public class complex {//复数类 7 doubl ...

  9. Java继承的两道实验题目

    设计一个表示二维平面上点的类Point,包含有表示坐标位置的Protect类型的成员变量 获取和设置x和y值的public方法 package classwork_6; public class Po ...

  10. pixi.js持续渲染页面

    Pixi是一个超快的2D渲染引擎,通过Javascript和Html技术创建动画或管理交互式图像,从而制作游戏或应用. 项目地址:https://github.com/pixijs/pixi.js A ...