拖拉事件

拖拉 drag ,是指用户在某个对象上按下鼠标键不放拖动它到另一个位置然后释放鼠标键将该对象放在那里

一旦某个元素节点的 draggable 属性设为true,就无法再用鼠标选中该节点内部的 文字 或 子节点 

  • 拖拉的对象:

除了 元素节点 默认不可以拖拉,其他(图片、链接、选中的文字)都是可以直接拖拉的

  • 为了让 元素节点 可拖拉,可以将该节点的 draggable 属性设为 true
  • <div draggable="true">
    此区域可拖拉
    </div>

图片(<img>)和 链接(<a>)不加这个属性就可以拖拉

往往是将 draggable 其设为 false,防止拖拉这两种元素

  • 当 元素节点 或 选中的文本 被拖拉时,就会持续触发拖拉事件

drag            拖拉过程中,在被拖拉的节点上持续触发(相隔几百毫秒)。

dragstart            用户开始拖拉时,在被拖拉的节点上触发

该事件的 target 属性是被拖拉的节点。

通常应该在这个事件的监听函数中,指定拖拉的数据。

dragend            拖拉结束时释放鼠标键按下 ESC 键)在被拖拉的节点上触发

该事件的 target 属性是被拖拉的节点。

它与 dragstart 事件,在同一个节点上触发。

不管拖拉是否跨窗口,或者中途被取消,dragend事件总是会触发的。

  • 在 某节点 触发

dragenter            拖拉进入 某节点 时,在 某节点 上触发一次

该事件的 target 属性是 节点

通常应该在这个事件的监听函数中,指定是否允许在 某节点 放下(drop)拖拉的数据。

如果 某节点 没有该事件的监听函数,或者 监听函数不执行任何操作,就意味着不允许在当前节点放下数据。

在视觉上显示拖拉进入当前节点,也是在这个事件的监听函数中设置。

dragover            拖拉到 某节点 上方时,在 某节点 上持续触发(相隔几百毫秒)

该事件的 target 属性是 某节点 。

该事件与 dragenter 事件的区别是

  • dragenter事件在进入该节点时触发
  • 只要没有离开这个节点,dragover 事件会持续触发。

dragleave            拖拉操作离开 某节点 范围时,在 某节点 上触发一次

该事件的 target 属性是当前节点

如果要在视觉上显示拖拉离开操作当前节点,就在这个事件的监听函数中设置。

drop            被拖拉的节点或选中的文本,释放到 某节点 时,在 某节点 上触发

注意:

  • 如果 某节点 不允许 drop,即使在该节点上方松开鼠标键,也不会触发该事件
  • 如果用户按下 ESC 键,取消这个操作,也不会触发该事件

该事件的监听函数负责取出拖拉数据,并进行相关处理

  • 实例:

动态改变被拖动节点的背景色

  • div.addEventListener('dragstart', function (e) {
    this.style.backgroundColor = 'red';
    }, false); div.addEventListener('dragend', function (e) {
    this.style.backgroundColor = 'green';
    }, false);

(98)Wangdao.com_第三十天_拖拉事件的更多相关文章

  1. (97)Wangdao.com_第三十天_触摸事件

    触摸事件 只有触摸屏才会引发这一类事件 触摸事件 和 鼠标事件 同时触发,即使这个时候并没有用到鼠标. 这是为了让那些只定义鼠标事件.没有定义触摸事件的代码,在触摸屏的情况下仍然能用. 如果想避免这种 ...

  2. (93)Wangdao.com_第二十六天_鼠标事件

    鼠标事件 与鼠标相关的事件,继承了 MouseEvent 接口 分类: click        按下鼠标(通常是按下主按钮)时触发.        mousedown 首先触发,mouseup 接着 ...

  3. Jmeter(三十六)_运行过程中改变负载

    顾名思义,jmeter在做性能测试时,可以在不停止脚本的情况下修改负载压力,达到期望的测试效果.我们将通过Constant Throughput Timer(吞吐量计时器)和Beanshell服务器来 ...

  4. Jmeter(三十五)_分布式

    jmeter分布式简单步骤说明: 1:添加远程服务器IP到配置文件 在JMETER_HOME / bin / jmeter.properties中,找到名为“ remote_hosts ” 的属性,并 ...

  5. Jmeter(三十五)_精确实现网页爬虫

    Jmeter实现了一个网站文章的爬虫,可以把所有文章分类保存到本地文件中,并以文章标题命名 它原理就是对网页提交一个请求,然后把返回的所有值提取出来,利用ForEach控制器去实现遍历.下面来介绍一下 ...

  6. Jmeter(三十二)_搭建本地接口自动化环境

    我们在学习接口自动化的时候,最理想的状态是在公司有项目可以操作.大部分时候我们并没有可以练习的项目,因此练习接口无从谈起,只能找一些开放的api来练一练,但是这样并不能提高我们的技术.因此我们需要搭建 ...

  7. SpringBoot | 第三十二章:事件的发布和监听

    前言 今天去官网查看spring boot资料时,在特性中看见了系统的事件及监听章节.想想,spring的事件应该是在3.x版本就发布的功能了,并越来越完善,其为bean和bean之间的消息通信提供了 ...

  8. 学习之路三十九:新手学习 - Windows API

    来到了新公司,一开始就要做个程序去获取另外一个程序里的数据,哇,挑战性很大. 经过两周的学习,终于搞定,主要还是对Windows API有了更多的了解. 文中所有的消息常量,API,结构体都整理出来了 ...

  9. 第三十六节,目标检测之yolo源码解析

    在一个月前,我就已经介绍了yolo目标检测的原理,后来也把tensorflow实现代码仔细看了一遍.但是由于这个暑假事情比较大,就一直搁浅了下来,趁今天有时间,就把源码解析一下.关于yolo目标检测的 ...

随机推荐

  1. MongoDB 3.6.9 集群搭建 - 切片+副本集

    1. 环境准备 在Mongo的官网下载Linux版本安装包,然后解压到对应的目录下:由于资源有限,我们采用Replica Sets + Sharding方式来配置高可用.结构图如下所示: 这里我说明下 ...

  2. freemarker和thymeleaf的使用样例

    最近需要对公司项目首页使用Java模板重做,以提高首屏加载速度和优化SEO. 在选择模板时发现freemarker和thymeleaf最为常用. 两者最大的区别在于语法,对性能方面未作测试,具体性能测 ...

  3. oldboy s21day10

    #!/usr/bin/env python # -*- coding:utf-8 -*-   # 1.写函数,函数可以支持接收任意数字(位置传参)并将所有数据相加并返回. ''' def func(* ...

  4. html设置背景图片并自适应

    <style> html{ height:100%; } body{ padding: 0; margin: 0; background: url(images/2.jpg); backg ...

  5. metasploit 教程之信息收集

    信息收集 信息收集范围很大,可以从不同层面,不同维度进行信息收集. 系统补丁 我们知道目标机器缺少什么补丁就意味着存在与其对应的漏洞.我们可以利用这些漏洞来达到我们渗透攻击的目的. # 使用的模块 u ...

  6. Vue技术内幕 出去看看吧 榨干部分小细节

    vue\src\platforms\web\entry-runtime-with-compiler.js /** * Get outerHTML of elements, taking care * ...

  7. 微信app支付的坑

    app支付商户申请,需注册并认证开放平台账号后电脑端登录开放平台官网:open.weixin.qq.com,[管理中心]->[移动应用],选择需要申请支付的应用,点击[查看]->[微信支付 ...

  8. css基础二

    1,文本 文本颜色: <style> body {color:red;} /*为body的所有字体设置字体颜色为红色*/ h1 {color:#00ff00;} /*为h1元素设置字体颜色 ...

  9. OpenCV3编程入门读书笔记5-边缘检测

    一.边缘检测的一般步骤 1.滤波 边缘检测的算法主要是基于图像强度的一阶和二阶导数,但导数通常对噪声很敏感,因此必须采用滤波器来改善与噪声有关的边缘检测器的性能. 2.增强 增强边缘的基础是确定图像各 ...

  10. JavaScript入门学习笔记(表单验证)

    表单验证: 在数据被送到服务器之前对HTML表单中的输入数据进行验证,避免服务器频繁验证信息造成用户体验差. (1)表单数据是否为空 (2)输入的信息格式是否正确 (3)输入数据的类型是否正确 必填( ...