HTML5深入学习之鼠标跟随，拖拽事件
程序员文章站
2022-10-08 21:39:12
知识点（鼠标跟随）： 下面这个例子的效果就是鼠标点击元素后，元素跟着鼠标移动 知识点（鼠标拖拽） 以上3个事件的控制对象为被拖拽的元素 （整个过程我们可以称之为拖拽区） 以上4个事件的控制对象为被拖追元素的目的容器（整个过程我们可以称之为投放区） 实例1（将一个容器拖放到另一个容器中） 实例2(文件 ......
知识点（鼠标跟随）：
- mousedown: 当用户用鼠标点击在某一元素上就会触发该事件
- mouseover: 当鼠标指针在某一元素上移动就会触发改事件
下面这个例子的效果就是鼠标点击元素后，元素跟着鼠标移动
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>独秀不爱秀</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#one {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="one"></div>
<script type="text/javascript">
window.onload = function () {
var one = document.getelementbyid('one');
// mousedown鼠标事件：当用户点击鼠标在元素上就会触发该事件
one.addeventlistener('mousedown', function () {
// mousemove 鼠标事件：当鼠标指针在元素上移动就会触发此事件
/**
* e：指事件，在火狐浏览器中事件用window.event,所以只有把 event
* 所以只有把event传给函数使用。为了兼容火狐和浏览器，一般会在函数里自动
* 重新赋值: e = e || window.event;
*/
document.addeventlistener('mousemove', function (e) {
one.style.left = e.clientx + 'px';
one.style.top = e.clienty + 'px';
});
});
}
</script>
</body>
</html>
知识点（鼠标拖拽）
- dragstart: 用户开始拖拽时触发该事件
- drag: 用户正在拖拽时触发该事件
- dragend: 用户结束拖拽时触发该事件
以上3个事件的控制对象为被拖拽的元素 （整个过程我们可以称之为拖拽区）
- dragenter: 当被拖拽的元素对象进入其容器范围内时触发该事件
- dragover: 当被拖拽的元素对象在其容器范围内拖拽时触发该事件
- dragleave: 当被拖拽的元素对象离开其容器范围内触发该事件
- drop: 在一个拖拽过程中，鼠标释放触发该事件
以上4个事件的控制对象为被拖追元素的目的容器（整个过程我们可以称之为投放区）
实例1（将一个容器拖放到另一个容器中）
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>独秀不爱秀</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#one {
width: 200px;
height: 200px;
border: 1px solid rebeccapurple;
}
#two {
width: 100px;
height: 100px;
background-color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="one"></div><br>
<!-- draggable属性：设置改元素是否能够被拖拽 -->
<div id="two" draggable="true"></div>
<script type="text/javascript">
window.onload = function () {
function $(id) {
return document.getelementbyid(id);
}
// 鼠标拖拽事件(注意控制对象为被拖拽的元素)
// dragstart: 用户开始拖拽时触发
$('two').addeventlistener('dragstart', function (e) {
// $('one').innerhtml = '开始拖拽';
});
// drag: 用户正在拖拽时触发
$('two').addeventlistener('drag', function (e) {
// $('one').innerhtml = '移动当中';
});
// dragend:用户结束拖拽时触发
$('two').addeventlistener('dragend', function (e) {
// $('one').innerhtml = '移动结束';
});
// 投放过程事件(注意控制对象为拖拽元素的目的地元素)
// dragenter: 当被拖拽的元素对象进入其范围内时触发
$('one').addeventlistener('dragenter', function (e) {
// $('one').innerhtml = '进入';
e.preventdefault(); // 阻止默认事件
});
// dragover: 当被拖拽的元素对象在该容器范围内拖拽时触发
$('one').addeventlistener('dragover', function (e) {
// $('one').innerhtml += '我就在里面';
e.preventdefault(); // 阻止默认事件（拖动的默认事件为在新窗口中打开）
});
// dragleave: 当被拖拽的元素对象离开其容器范围内触发
$('one').addeventlistener('dragleave', function (e) {
// $('one').innerhtml += '离开';
e.preventdefault(); // 阻止默认事件
});
// 投放事件(注意控制对象为拖拽元素的目的地元素)
// drop: 在一个拖动过程中，鼠标释放触发
$('one').addeventlistener('drop', function () {
$('one').appendchild($('two'));
});
}
</script>
</body>
</html>
实例2(文件拖拽上传)
前端代码：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>独秀不爱秀</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 200px;
border: 2px dashed #ccc;
}
</style>
</head>
<body>
<div id="box">请拖入文件进行上传！很炫酷哟！</div>
<script type="text/javascript">
var box = document.getelementbyid('box');
box.addeventlistener('dragenter', function (e) {
e.preventdefault();
});
box.addeventlistener('dragover', function (e) {
box.innerhtml = '已有东西进入，请松开';
e.preventdefault();
});
box.addeventlistener('dragleave', function (e) {
box.innerhtml = '赶紧回来';
e.preventdefault();
});
box.addeventlistener('drop', function (e) {
box.innerhtml = '已经松开';
// console.log(e.datatransfer.files[0]);
// lastmodified: 1561646705661
// lastmodifieddate: thu jun 27 2019 22: 45: 05 gmt + 0800(中国标准时间) { }
// name: "个人简历.pdf"
// size: 196022
// type: "application/pdf"
var file = e.datatransfer.files[0];
var fd = new formdata();
fd.append('pic', file);
var xhr = new xmlhttprequest();
xhr.open('post', '3-3.php');
xhr.send(fd);
xhr.addeventlistener('readystatechange', function () {
if (this.readystate === 4) {
// console.log(1111);
// console.log(this.responsetext);
box.innerhtml += this.responsetext;
}
});
e.preventdefault();
});
</script>
</body>
</html>
后端代码（php实现）：
if (isset($_files)) {
$orgin = $_files['pic']['tmp_name'];
$target = $_files['pic']['name'];
$moved = move_uploaded_file($orgin, './' . $target);
if (!$moved) {
echo '上传失败';
}
echo ', 且上传成功';
}
当我们将某一文件（这里我用一张图片）拖f放到这个容器中后，这个图片就到了这个指定得文件夹中。
上一篇： HTML连载17-id选择器&类选择器
下一篇： nrm 安装与使用