javascript 事件之拖拽事件

首先，在了解拖拽事件之前我们先了解一下，拖拽事件都会用到哪些知识。
在拖拽目标上发生的事件（源元素）

ondragstart用于元素开始被拖拽
ondrag元素正在被拖拽
ondragend用户完成拖拽事件后

释放目标后发生的事件:

ondragenter当鼠标拖动目标对象进入到目标容器中触发该事件
ondragover当某对象在另一个容器中被拖拽时触发该事件（已经从被拖拽进来，又开始被拖拽）
ondragleave当鼠标拖动元素离开其容器时触发该事件
ondrop在鼠标拖动过程中释放鼠标后触发事件

这是拖拽事件的基本知识点，下面我们根据具体事例进行演练


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>javascript事件篇之拖拽事件</title>
		<style type="text/css">
			.dragtarget
			{
				width: 200px;
				height: 100px;
				text-align: center;
                  border: 1px solid #000;
				  float: left;
				  margin: 10px 10px;
			}
		</style>
		<script type="text/javascript">
			function dragStart(event)
			{
				event.dataTransfer.setData("Text",event.target.id);//当开始拖拽时获取目标元素id
			}
			function dragging(event)
			{
				document.getElementById('demo').innerHTML="文本内容正在被拖动";
			}
			function allowdrag(event)
			{
				event.preventDefault();
			}
			function drop(event)
			{
				event.preventDefault();
				var data = event.dataTransfer.getData("Text");
				event.target.appendChild(document.getElementById(data));
				document.getElementById("demo").innerHTML="文本已经到另一个容器中";
			}
		</script>
	</head>
	<body>
		<p>下面有两个div容器</p>
		<div class="dragtarget" ondragover="allowdrag(event)" ondrop="drop(event)">
			<p draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)" id="con">我是内容</p>
		</div>
		<div class="dragtarget" ondragover="allowdrag(event)" ondrop="drop(event)">
			
		</div>
		<p id="demo"></p>
	</body>
</html>

具体介绍：
首先，html部分简单的布局了两个div容器，其中一个div中容纳了一个p标签，第一个div中的p标签中要写上id，下面会讲解为什么会加上id，并且给改元素加上draggable属性，将其设置为true，（意思是将该元素设置为可拖动），我们试想一下，p标签好比是我们，容器是火车站，当我们开始拖拽目标元素时，就是用到dragstart，他需要获取到该元素的具体信息，也就是id和元素类型，用到了,event.dataTransfer.setData(),其中dataTransfer是数据传输，传输的内容用setData来设定（format，id）这时用到id，因为id是我们获取信息的标识，这就是火车站里面的站牌信息，什么时候开始上车，当我们了解到站台信息时开始上车。
那另一个容器就是目的地，我们下车时也需要过安检，看看人家能否让你通过，这时就用到了preventDefault（）方法，（不阻止默认动作），当鼠标松下时我们允许他放置，这时就用到了ondrop（）。放下时我们需要在另一个容器中添加目标元素，appendchild（添加一个子节点）
具体演示：

在这里插入图片描述

# javascript # html5
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生