经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
HTML5深入学习之鼠标跟随,拖拽事件
来源:cnblogs  作者:小方哥·  时间:2019/6/29 20:50:12  对本文有异议

知识点(鼠标跟随):

  1. mousedown: 当用户用鼠标点击在某一元素上就会触发该事件
  2. mouseover:  当鼠标指针在某一元素上移动就会触发改事件

下面这个例子的效果就是鼠标点击元素后,元素跟着鼠标移动

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>独秀不爱秀</title>
  6. <style type="text/css">
  7. * {
  8. padding: 0;
  9. margin: 0;
  10. }
  11. #one {
  12. width: 100px;
  13. height: 100px;
  14. background-color: red;
  15. position: absolute;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div id="one"></div>
  21. <script type="text/javascript">
  22. window.onload = function () {
  23. var one = document.getElementById('one');
  24. // mousedown鼠标事件:当用户点击鼠标在元素上就会触发该事件
  25. one.addEventListener('mousedown', function () {
  26. // mousemove 鼠标事件:当鼠标指针在元素上移动就会触发此事件
  27. /**
  28. * e:指事件,在火狐浏览器中事件用window.event,所以只有把 event
  29. * 所以只有把event传给函数使用。为了兼容火狐和浏览器,一般会在函数里自动
  30. * 重新赋值: e = e || window.event;
  31. */
  32. document.addEventListener('mousemove', function (e) {
  33. one.style.left = e.clientX + 'px';
  34. one.style.top = e.clientY + 'px';
  35. });
  36. });
  37. }
  38. </script>
  39. </body>
  40. </html>

知识点(鼠标拖拽)

  1. dragstart: 用户开始拖拽时触发该事件
  2. drag:        用户正在拖拽时触发该事件
  3. dragend:  用户结束拖拽时触发该事件

  以上3个事件的控制对象为被拖拽的元素 (整个过程我们可以称之为拖拽区)

  1. dragenter: 当被拖拽的元素对象进入其容器范围内时触发该事件
  2. dragover:  当被拖拽的元素对象在其容器范围内拖拽时触发该事件
  3. dragleave: 当被拖拽的元素对象离开其容器范围内触发该事件
  4. drop:          在一个拖拽过程中,鼠标释放触发该事件

  以上4个事件的控制对象为被拖追元素的目的容器(整个过程我们可以称之为投放区)

 

实例1(将一个容器拖放到另一个容器中)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>独秀不爱秀</title>
  6. <style type="text/css">
  7. * {
  8. padding: 0;
  9. margin: 0;
  10. }
  11. #one {
  12. width: 200px;
  13. height: 200px;
  14. border: 1px solid rebeccapurple;
  15. }
  16. #two {
  17. width: 100px;
  18. height: 100px;
  19. background-color: red;
  20. cursor: pointer;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div id="one"></div><br>
  26. <!-- draggable属性:设置改元素是否能够被拖拽 -->
  27. <div id="two" draggable="true"></div>
  28. <script type="text/javascript">
  29. window.onload = function () {
  30. function $(id) {
  31. return document.getElementById(id);
  32. }
  33. // 鼠标拖拽事件(注意控制对象为被拖拽的元素)
  34. // dragstart: 用户开始拖拽时触发
  35. $('two').addEventListener('dragstart', function (e) {
  36. // $('one').innerHTML = '开始拖拽';
  37. });
  38. // drag: 用户正在拖拽时触发
  39. $('two').addEventListener('drag', function (e) {
  40. // $('one').innerHTML = '移动当中';
  41. });
  42. // dragend:用户结束拖拽时触发
  43. $('two').addEventListener('dragend', function (e) {
  44. // $('one').innerHTML = '移动结束';
  45. });
  46. // 投放过程事件(注意控制对象为拖拽元素的目的地元素)
  47. // dragenter: 当被拖拽的元素对象进入其范围内时触发
  48. $('one').addEventListener('dragenter', function (e) {
  49. // $('one').innerHTML = '进入';
  50. e.preventDefault(); // 阻止默认事件
  51. });
  52. // dragover: 当被拖拽的元素对象在该容器范围内拖拽时触发
  53. $('one').addEventListener('dragover', function (e) {
  54. // $('one').innerHTML += '我就在里面';
  55. e.preventDefault(); // 阻止默认事件(拖动的默认事件为在新窗口中打开)
  1. });
  2. // dragleave: 当被拖拽的元素对象离开其容器范围内触发
  3. $('one').addEventListener('dragleave', function (e) {
  4. // $('one').innerHTML += '离开';
  5. e.preventDefault(); // 阻止默认事件
  6. });
  7. // 投放事件(注意控制对象为拖拽元素的目的地元素)
  8. // drop: 在一个拖动过程中,鼠标释放触发
  9. $('one').addEventListener('drop', function () {
  10. $('one').appendChild($('two'));
  11. });
  12. }
  13. </script>
  14. </body>
  15. </html>

实例2(文件拖拽上传)

  前端代码:

  

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>独秀不爱秀</title>
  6. <style type="text/css">
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. }
  11. #box {
  12. width: 200px;
  13. height: 200px;
  14. border: 2px dashed #ccc;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div id="box">请拖入文件进行上传!很炫酷哟!</div>
  20. <script type="text/javascript">
  21. var box = document.getElementById('box');
  22. box.addEventListener('dragenter', function (e) {
  23. e.preventDefault();
  24. });
  25. box.addEventListener('dragover', function (e) {
  26. box.innerHTML = '已有东西进入,请松开';
  27. e.preventDefault();
  28. });
  29. box.addEventListener('dragleave', function (e) {
  30. box.innerHTML = '赶紧回来';
  31. e.preventDefault();
  32. });
  33. box.addEventListener('drop', function (e) {
  34. box.innerHTML = '已经松开';
  35. // console.log(e.dataTransfer.files[0]);
  36. // lastModified: 1561646705661
  37. // lastModifiedDate: Thu Jun 27 2019 22: 45: 05 GMT + 0800(中国标准时间) { }
  38. // name: "个人简历.pdf"
  39. // size: 196022
  40. // type: "application/pdf"
  41.  
  42. var file = e.dataTransfer.files[0];
  43. var fd = new FormData();
  44. fd.append('pic', file);
  45. var xhr = new XMLHttpRequest();
  46. xhr.open('post', '3-3.php');
  47. xhr.send(fd);
  48. xhr.addEventListener('readystatechange', function () {
  49. if (this.readyState === 4) {
  50. // console.log(1111);
  51. // console.log(this.responseText);
  52. box.innerHTML += this.responseText;
  53. }
  54. });
  55. e.preventDefault();
  56. });
  57. </script>
  58. </body>
  59. </html>

  后端代码(PHP实现):

  

  1. if (isset($_FILES)) {
  2. $orgin = $_FILES['pic']['tmp_name'];
  3. $target = $_FILES['pic']['name'];
  4. $moved = move_uploaded_file($orgin, './' . $target);
  5. if (!$moved) {
  6. echo '上传失败';
  7. }
  8. echo ', 且上传成功';
  9. }

  当我们将某一文件(这里我用一张图片)拖f放到这个容器中后,这个图片就到了这个指定得文件夹中。

原文链接:http://www.cnblogs.com/duxiu-fang/p/11107672.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号