知识点(鼠标跟随):
- 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放到这个容器中后,这个图片就到了这个指定得文件夹中。