zoukankan      html  css  js  c++  java

  • 拖拽效果

    拖拽

    1. 鼠标移动到box上,按下鼠标左键,移动鼠标,box开始跟着鼠标移动
    2. 鼠标按钮抬起,box不再移动

    注意:

    1. 计算box移动时, 当前box的位置 + 两个坐标的差
    2. box移动后, 要更新起始坐标位置
    1. <!DOCTYPE html> 
    2. <html lang="en"> 
    3. <head> 
    4. <meta charset="UTF-8"> 
    5. <title>Title</title> 
    6. <style> 
    7. /* 清除默认样式 */ 
    8. *{margin: 0;padding: 0;} 
    9. #box{ 
    10. width: 300px; 
    11. height: 300px; 
    12. background: pink; 
    13. cursor: move; 
    14. position: absolute; 
    15. top: 0; 
    16. left: 0; 
    17. } 
    18. </style> 
    19. </head> 
    20. <body> 
    21. <!-- 写div --> 
    22. <div id="box"> 拖我一下试试!!! </div> 
    23. <script> 
    24. var flag = false;// 默认值为false,box不跟随鼠标移动; 为true,box跟随鼠标移动 
    25.  
    26. var box = document.getElementById('box'); 
    27. // 记录鼠标按下的坐标位置 
    28. var x1 = 0; 
    29. var y1 = 0; 
    30. // 当鼠标移动到box上时并且按下, 设置flag为true 
    31. box.onmousedown= function (e) { 
    32. flag = true;//允许跟着鼠标移动 
    33. // 记录当前位置 
    34. x1 = e.pageX; 
    35. y1 = e.pageY; 
    36. }; 
    37. // 当鼠标抬起, 设置flag为false 
    38. box.onmouseup= function (e) { 
    39. flag = false;//不允许跟着鼠标移动 
    40. }; 
    41. // 当鼠标被甩飞, 设置flag为false 
    42. box.onmouseout= function (e) { 
    43. flag = false;//不允许跟着鼠标移动 
    44. //console.log('鼠标飞走了...'); 
    45. }; 
    46.  
    47.  
    48. // 跟随鼠标 
    49. box.onmousemove = function (e) { 
    50. if(flag){ 
    51. //获取鼠标坐标 
    52. var x2 = e.pageX; 
    53. var y2 = e.pageY; 
    54. //console.log(x, y); 
    55.  
    56. //设置box的位置 
    57. // 坐标位置 = box的现在位置 + (x2-x1) + 'px'; 
    58. box.style.top = box.offsetTop + (y2-y1) + 'px';//注意单位 
    59. box.style.left = box.offsetLeft + (x2-x1) + 'px';//注意单位 
    60. } 
    61. // 更新box的起始位置 
    62. x1 = x2; 
    63. y1 = y2; 
    64. }; 
    65. </script> 
    66. </body> 
    67. </html> 
  • 相关阅读:
    Kruskal算法
    拓扑排序
    邻接表有向图
    邻接矩阵的有向图
    邻接表无向图
    邻接矩阵无向图
    斐波那契堆
    二项堆
    斜堆（待补充）
    项目中maven依赖无法自动下载
  • 原文地址：https://www.cnblogs.com/linyufeng/p/9600326.html
Copyright © 2011-2022 走看看