Chinaunix首页 | 论坛 | 博客

拾忆1765207585的ChinaUnix博客

首页　| 　博文目录　| 　关于我

拾忆1765207585

  • 博客访问： 957049
  • 博文数量： 210
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2070
  • 用 户 组： 普通用户
  • 注册时间： 2014-11-19 21:54
文章分类

全部博文（210）

文章存档

2020年（2）

2019年（18）

2018年（27）

2017年（5）

2016年（53）

2015年（88）

2014年（17）

我的朋友
最近访客
推荐博文
JavaScript 拖拽的制作

分类： JavaScript

2016-08-22 20:24:16


html代码：

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <link rel="stylesheet" href="css/1.css" />
  7.         <script type="text/javascript" src="js/1.js"></script>
  8.     </head>
  9.     <body>
  10.         <div id="bigbox">
  11.             <div id="smallbox"></div>
  12.         </div>
  13.     </body>
  14. </html>

css代码：

点击(此处)折叠或打开

  1. *{
  2.     margin:0;
  3.     padding: 0;
  4. }
  5. #bigbox{
  6.     width: 800px;
  7.     height: 600px;
  8.     margin: 30px auto;
  9.     position: relative;
  10.     outline: 1px solid black;
  11. }
  12. #smallbox{
  13.     width: 100px;
  14.     height: 100px;
  15.     position: absolute;
  16.     background: palegreen;
  17.     font-size: 30px;
  18.     color: black;
  19.     line-height: 100px;
  20.     cursor: move;
  21. }

js代码：

点击(此处)折叠或打开

  1. window.onload = function (){
  2.                 var bigbox = document.getElementById("bigbox");
  3.                 var box = document.getElementById("box");
  4.                 console.log(box);
  5.                 
  6.                 box.onmousedown = function(event){    
  7.                     var e = event || window.event;
  8.                     var x = e.clientX - box.offsetLeft;
  9.                     var y = e.clientY - box.offsetTop;
  10.                     
  11.                     
  12.                     bigbox.onmousemove = function(event){
  13.                         var e = event || window.event;
  14.                         //动态的获取offsetLeft offsetTop 的值
  15.                         var a = e.clientX-x;
  16.                         var b = e.clientY-y;
  17.                         
  18.                         //临界值的判断
  19.                         if( a>=700){
  20.                             a=700;
  21.                         }if(a<0){
  22.                             a=0;
  23.                         }
  24.                         if( b>=700){
  25.                             b=700;
  26.                         }if(b<0){
  27.                             b=0;
  28.                         }
  29.                         
  30.                         //box left top 随着鼠标的位置而移动颜色变化好追踪
  31.                         box.style.left = a +'px';
  32.                         box.style.top = b + 'px';
  33.                         box.style.backgroundColor = "red";
  34.                         
  35.                     }
  36.                     
  37.                     //清空移动样式 和颜色
  38.                     document.onmouseup= function(){
  39.                         bigbox.onmousemove = null;
  40.                         bigbox.onmouseup = null;
  41.                         box.style.backgroundColor = "greenyellow";
  42.                     }
  43.                     
  44.                 }
  45.          }


阅读(1130) | 评论(0) | 转发(0) |
0

上一篇：JavaScript 阻止浏览器默认事件

下一篇：JavaScript offsetLeft 系列属性的介绍

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6