0. 前言
我说的蓝胖子就是想的那个能够帮助大熊解决各种困难的“哆啦A梦”，今天就是是实现用鼠标托拽这个蓝胖子，哈哈，那就开始吧！！！
timg.jpg
1. 简介
HTML5提供专门的拖拽与拖放的API的方法。
2. 相关重点
- DataTransfer 对象 ： 托拽对象用来传递的媒介，使用一般为Event.dataTransfer || e.dataTransfer。
- draggable属性 ： draggable默认是true，默认是可以被托拽的，如果我们想要实现托拽，最好是手动设置为true。
- ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
- ondrag 事件 ： 当拖拽元素移动的时候持续触发的事件，此事件作用在被拖曳元素上
- ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
- ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
- ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
- ondragleave 事件 ： 当拖曳元素离开目标元素的时候触发的事件，此事件作用在目标元素上
- ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
- Event.preventDefault() || e.preventDefault() 方法 ： 阻止默认事件的方法，在ondragover中一定要阻止默认事件，否则ondrop事件不会被触发。
3. 代码实现
3.1 静态效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
float: left;
border: 1px dashed red;
}
</style>
</head>
<body>
<div id="box1">
<!-- draggable默认是true，默认是可以被拖拽的，
如果我们像要实现拖拽，最好手动设置为true
-->
<img src="../img/drag.jpg" draggable="true" id="dragImg" />
</div>
<div id="box2"></div>
</body>
</html>
图片.png
3.2 实现托拽
<script type="text/javascript">
var box1 = document.querySelector("#box1");
var box2 = document.querySelector("#box2");
var img = document.querySelector("img");
/**** 拖拽元素相关事件 ****/
img.ondragstart = function (e) {
//设置拖拽的标识 (在其他事件对象中就会获取到存储的这个值)
e.dataTransfer.setData("id", e.target.id);
}
/**** 目标元素事件相关 ****/
box2.ondragover = function (e) {
//这里需要阻止事件默认行为才能触发ondrop
e.preventDefault();
}
box2.ondrop = function (e) {
//获取拖拽时存储的拖拽标识
var imgId = e.dataTransfer.getData("id");
//获取拖拽元素，并且加入到目标元素
this.appendChild(document.querySelector("#" + imgId));
}
</script>
GIF.gif
3.3 实现反托拽
那么我想把这个蓝胖子从右面拖到左面怎么弄呢？你是不是已经想到了啊？聪明！那就是把box1当做目标元素就ok了啊！！！
box1.ondragover = function (e) {
e.preventDefault();
}
box1.ondrop = function (e) {
//获取拖拽时存储的拖拽标识
var imgId = e.dataTransfer.getData("id");
//获取拖拽元素，并且加入到目标元素
this.appendChild(document.querySelector("#" + imgId));
}
GIF.gif
4. 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
float: left;
border: 1px dashed red;
}
</style>
</head>
<body>
<div id="box1">
<!-- draggable默认是true，默认是可以被拖拽的，
如果我们像要实现拖拽，最好手动设置为true
-->
<img src="../img/drag.jpg" draggable="true" id="dragImg" />
</div>
<div id="box2"></div>
<script type="text/javascript">
var box1 = document.querySelector("#box1");
var box2 = document.querySelector("#box2");
var img = document.querySelector("img");
/**** 拖拽元素相关事件 ****/
img.ondragstart = function (e) {
//设置拖拽的标识 (在其他事件对象中就会获取到存储的这个值)
e.dataTransfer.setData("id", e.target.id);
}
box2.ondragover = function (e) {
//这里需要阻止事件默认行为才能触发ondrop
e.preventDefault();
}
box2.ondrop = function (e) {
//获取拖拽时存储的拖拽标识
var imgId = e.dataTransfer.getData("id");
//获取拖拽元素，并且加入到目标元素
this.appendChild(document.querySelector("#" + imgId));
}
box1.ondragover = function (e) {
e.preventDefault();
}
box1.ondrop = function (e) {
//获取拖拽时存储的拖拽标识
var imgId = e.dataTransfer.getData("id");
//获取拖拽元素，并且加入到目标元素
this.appendChild(document.querySelector("#" + imgId));
}
</script>
</body>
</html>
5. 结束语
是不是已经学会了，这回你也可以不应用jQUery啊什么的来做这个托拽的效果了，如果你没看懂也没有关系，希望我写的对你有所帮助，最后，到你们的时间了，点赞吧，分享一下吧！！！
网友评论