浏览器的拖拉事件

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

拖拉的对象有好几种,包括元素节点、图片、链接、选中的文字等等。在网页中,除了元素节点默认不可以拖拉,其他(图片、链接、选中的文字)都是可以直接拖拉的。为了让元素节点可拖拉,可以将该节点的draggable属性设为true

注意这点哦!!!如果需要这个元素具有拖拉功能,必须要设置一个属性draggable=true 。

当元素节点或选中的文本被拖拉时,就会持续触发拖拉事件,包括以下一些事件。

  • drag:拖拉过程中,在被拖拉的节点上持续触发(相隔几百毫秒)。
  • dragstart:用户开始拖拉时,在被拖拉的节点上触发,该事件的target属性是被拖拉的节点。通常应该在这个事件的监听函数中,指定拖拉的数据。
  • dragend:拖拉结束时(释放鼠标键或按下 ESC 键)在被拖拉的节点上触发,该事件的target属性是被拖拉的节点。它与dragstart事件,在同一个节点上触发。不管拖拉是否跨窗口,或者中途被取消,dragend事件总是会触发的。
  • dragenter:拖拉进入当前节点时,在当前节点上触发一次,该事件的target属性是当前节点。通常应该在这个事件的监听函数中,指定是否允许在当前节点放下(drop)拖拉的数据。如果当前节点没有该事件的监听函数,或者监听函数不执行任何操作,就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点,也是在这个事件的监听函数中设置。
  • dragover:拖拉到当前节点上方时,在当前节点上持续触发(相隔几百毫秒),该事件的target属性是当前节点。该事件与dragenter事件的区别是,dragenter事件在进入该节点时触发,然后只要没有离开这个节点,dragover事件会持续触发。
  • dragleave:拖拉操作离开当前节点范围时,在当前节点上触发,该事件的target属性是当前节点。如果要在视觉上显示拖拉离开操作当前节点,就在这个事件的监听函数中设置。
  • drop:被拖拉的节点或选中的文本,释放到目标节点时,在目标节点上触发。注意,如果当前节点不允许drop,即使在该节点上方松开鼠标键,也不会触发该事件。如果用户按下 ESC 键,取消这个操作,也不会触发该事件。该事件的监听函数负责取出拖拉数据,并进行相关处理。

---- 非常抱歉了 。这个不能显示动态图~~~~

下面的代码就是上图测试的————-

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: rgb(67, 218, 205);
float: left;
margin: 100px;
} #darg {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head> <body>
<div class="box">
<div id="darg" draggable="true"></div>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
// 定义一个变量来存放拖拽物
var dragged
// dragstart
document.addEventListener('dragstart', (e) => {
// 将拖拽目标法放入dragged
dragged = e.target
// 将被拖拽物设置透明度
e.target.style.opacity = 0.5
})
// dragend
document.addEventListener('dragend', (e) => {
// 将透明度设置为原来的样子
e.target.style.opacity = ''
})
// dragover
document.addEventListener('dragover', (e) => {
// 阻止默认事件
e.preventDefault()
})
// dragenter
document.addEventListener('dragenter', (e) => {
// 也又默认事件,需要先去掉
e.preventDefault()
// 防止事件冒泡,需要进行过滤
if (e.target.className === 'box') {
// 设置背景色
e.target.style.backgroundColor = 'purple'
}
})
// dragleave
document.addEventListener('dragleave', (e) => {
if (e.target.className === 'box') {
e.target.style.backgroundColor = ''
}
})
// drop
document.addEventListener('drop', (e) => {
// 阻止事件的默认事件
e.preventDefault()
// 判断自己要放置的节点是哪个
// 需要恢复颜色
e.target.style.backgroundColor = ''
if (e.target.className === 'box') {
dragged.parentNode.removeChild(dragged)
e.target.appendChild(dragged)
}
})
</script>
</body> </html>

总结:要完成这个,必须注意每个事件触发的事件~~~

每日分享!~ JavaScript(拖拽事件)的更多相关文章

  1. day52—JavaScript拖拽事件的应用(自定义滚动条)

    转行学开发,代码100天——2018-05-07 前面的记录里展示了JavaScript中鼠标拖拽功能,今天利用拖拽功能实现另一个应用场景——自定义滚动条(作为控制器)的用法. 常通过自定义滚动条控制 ...

  2. javascript 拖拽事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. javascript拖拽事件

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  4. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  5. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. Javascript 拖拽的一些高级的应用——逐行分析代码,让你轻松了解拖拽的原理

    我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...

  7. Javascript 拖拽的一些简单的应用——逐行分析代码,让你轻松了解拖拽的原理

    今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...

  8. Javascript 拖拽雏形中的一些问题——逐行分析代码,让你轻松了解拖拽的原理

    今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript&q ...

  9. Android Launcher拖拽事件详解【android4.0--Launcher系列二】

    AndroidICS4.0版本的launcher拖 拽的流程,基本和2.3的相似.就是比2.3写的封装的接口多了一些,比如删除类的写法就多了个类.等等.4.0的改变有一些,但是不是特别大.这个月一 直 ...

随机推荐

  1. Linux常用命令整理 - imsoft.cnblogs

    su 用户名 在不退出登陆的情况下,切换到另外一个人的身份如果用户名缺省,则切换到root状态会提示输入密码,密码不回显的. 在用su命令切换root用户时,使用“-”选项,这样可以将root的环境变 ...

  2. 自动构建Makefile(1)--C/C++编译流程&amp;Makefile规则简介

      前言: 大家在Windows上使用VS构建C/C++程序时,不需要自己编辑略显晦涩的Makefile文件,而对于初学者而言, 他们甚至没意识到它的存在.VS是自动生成Makefile文件, 并构建 ...

  3. 配置 VirtualBox backend - 每天5分钟玩转 Docker 容器技术(75)

    Rexy-Ray 支持多种 backend,上一节我们已经安装配置了 Rex-Ray,今天演示如何配置 VirtualBox backend. 在 VirtualBox 宿主机,即我的笔记本上启动 v ...

  4. [NOI2009]诗人小G(dp + 决策单调性优化)

    题意 有一个长度为 \(n\) 的序列 \(A\) 和常数 \(L, P\) ,你需要将它分成若干段,每 \(P\) 一段的代价为 \(| \sum ( A_i ) − L|^P\) ,求最小代价的划 ...

  5. idea 过段时间java程序包不存在问题 ?

    有时候我们在导入程序之后,系统会给出错误提示:Java:程序包xxxx不存在,现在我这里有一招,就是使用IDEA自动导入Java程序包,这也是IDEA的一大优点. 但是在看到这个问题的文章的时候,并不 ...

  6. cei()、linspace()、arrange()、full()、eye()、empty()、random()

    1.np.ceil()函数 np.ceil()函数为朝正无穷方向取整 a = np.array([-1.7, -1.5, -0.2, 0.2, 1.5, 1.7, 2.0]) print(np.cei ...

  7. mysql函数和操作符

    mysql,); //取模函数 +-----------+ ,) | +-----------+ | +-----------+ row in set (0.00 sec) mysql,); +--- ...

  8. Java知多少(39)interface接口

    在抽象类中,可以包含一个或多个抽象方法:但在接口(interface)中,所有的方法必须都是抽象的,不能有方法体,它比抽象类更加“抽象”. 接口使用 interface 关键字来声明,可以看做是一种特 ...

  9. property属性[Python]

    一.property解释 根据文档资料解释: property([fget[, fset[, fdel[, doc]]]]) Return a property attribute for new-s ...

  10. centos6安装部署git服务器(gitlab6.4)

    环境准备 python版本2.6git版本 1.8.4.1ruby版本ruby-2.0.0-p353gitlab-shell版本 v1.8.0gitlab版本6.4.3 因centos6系列的pyth ...