js拖拽事件
javascript 事件之拖拽事件首先，在了解拖拽事件之前我们先了解一下，拖拽事件都会用到哪些知识。在拖拽目标上发生的事件（源元素）ondragstart用于元素开始被拖拽ondrag元素正在被拖拽ondragend用户完成拖拽事件后释放目标后发生的事件:ondragenter当鼠标拖动目标对象进入到目标容器中触发该事件ondragover当某对象在另一个容器中被拖拽时触发该事件（已经从被拖拽进
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（添加一个子节点）
具体演示：
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)