好久没写了,不得不说人懒了好多..

也不打算实现什么太厉害的功能,因为不喜欢网上那些一大堆代码的,看的头晕,于是自己写了一个

旨在越简单越好(当然也走点形式- -其实是自己菜),所以一些宽度和高度都写死了,相信程序猿都知道怎么改的.- -

  1. (function () {
  2.     DragSize.prototype = {//为DriagSize方法添加其他属性以便调用
  3.         getMove: function(obj) {
  4.             var self = this;
  5.             obj.onmousedown = function(ev) {//为绑定的div绑定鼠标按下事件
  6.                 var oBox = self.dom;
  7.                 var oEvent = ev || event;
  8.                 var disX = oEvent.clientX - this.offsetLeft;
  9.                 var disY = oEvent.clientY - this.offsetTop;
  10.                 oEvent.cancelBubble = true;//阻止默认
  11.                 document.onmousemove = function(ev) {  //给页面绑定一个mousemove事件,用于拖动或者拖拽大小时用
  12.                     var oEvent = ev || event;
  13.                     var oRrsizeX = oEvent.clientX - disX;
  14.                     var oRrsizeY = oEvent.clientY - disY;
  15.                     obj.style.left = oRrsizeX + "px";
  16.                     obj.style.top = oRrsizeY + "px";
  17.                     if (obj == self.dragDiv) {
  18.                         if (oRrsizeX < 10) {//这里的10写死了,因为用于拖拽的点我写死了10px
  19.                             oRrsizeX = 10;
  20.                         }
  21.                         if (oRrsizeY < 10) {//这里的10写死了,因为用于拖拽的点我写死了10px
  22.                             oRrsizeY = 10;
  23.                         }
  24.                         oBox.style.width = oRrsizeX + obj.offsetWidth + "px";
  25.                         oBox.style.height = oRrsizeY + obj.offsetHeight + "px";
  26.                         obj.style.left = oRrsizeX + "px";
  27.                         obj.style.top = oRrsizeY + "px";
  28.                     }
  29.  
  30.                     return false;
  31.                 }
  32.                 document.onmouseup = function() {//鼠标弹起时别忘了把其他事件给取消了哈
  33.                     document.onmousemove = null;
  34.                     document.onnouseup = null;
  35.                 }
  36.                 return false;
  37.             }
  38.         }
  39.     };
  40. })();
  41.  
  42. function DragSize(dom) {
  43.     var self = this;
  44.     self.dom = dom;
  45.     self.dragDiv = createDragDiv();
  46.  
  47.     if (self.dom && self.dom.tagName == "DIV") {
  48.         self.dom.appendChild(self.dragDiv);
  49.         self.getMove(self.dom);
  50.         self.getMove(self.dragDiv);
  51.     } else {
  52.         throw "Wrong dom for binding.";
  53.     }
  54.     return self;
  55. }
  56.  
  57. //生成一个显示在右下角的点
  58. function createDragDiv() {
  59.     var div = document.createElement("DIV");
  60.     div.style.width = div.style.height = "10px";
  61.     div.style.background = "#6D71EF";
  62.     div.style.position = "absolute";
  63.     div.style.right= "0px";
  64.     div.style.bottom= "0px";
  65.     div.style.cursor = "se-resize";
  66.     return div;
  67. }

以上保存成DragSize.js文件.
然后页面上只需要实例化一下就可以了

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>可拖拽div大小呵呵呵呵呵</title>
  6. <style type="text/css">
  7.     *{ padding:0; margin:0;}
  8.     #box,#Div1{ width:100px; height:100px; background:#CCCCCC; border:1px solid #990033; position:absolute;}
  9. </style>
  10.     <script src="DragSize.js" type="text/javascript"></script>
  11. <script type="text/javascript">
  12.     window.onload = function() {
  13.         var oBox = document.getElementById('box');
  14.         var aa = new DragSize(oBox);
  15.     };
  16. </script>
  17. </head>
  18.  
  19. <body>
  20.     <div id="box">
  21.     </div>
  22. </body>
  23. </html>

这样就可以了,看下效果

当然,如果你想实现图片这样的效果的话,只需要把一个<img>图片加到div中,宽和高设置为100%就可以了

好了,结束了.

好像还没有....不得不说,如果是处理图片拖大小的话,有个比较简单的办法,使用ondrag事件...

  1. <html>
  2. <head>
  3. </head>
  4. <body >
  5.  
  6. <script language="javascript">
  7.     function resizeImage(evt, name) {
  8.         newX = evt.x;
  9.         newY = evt.y;
  10.         eval("document." + name + ".width=newX");
  11.         eval("document." + name + ".height=newY");
  12.     }
  13. </script>
  14. <img src="MiniMap.jpg" width="150" height="60" name="image" ondrag="resizeImage(event,'image')">
  15. </body></html>

不过....会有一个图标在那里...我暂时还不知道怎么去掉...有知道的告诉我哈.

  1.  

纯javascript实现可拖住/大小的div的更多相关文章

  1. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  2. ECharts-基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表

    ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...

  3. javascript日历控件——纯javascript版

    平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. < ...

  4. 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10（排行榜界面&界面管理）

    继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...

  5. 纯Javascript实现Windows 8 Metro风格实现

    Metro风格设计主要特点 1.Windows 8 Metro风格设计,实现网站或系统功能的导航 2.纯Javascript实现 3.支持所有IE.360.Chrome等常用浏览器 4.支持圆角.阴影 ...

  6. 纯javascript联动的例子

    有人想要学习下纯javascript联动的一些技巧,我这里就以日期的联动为例,附上一些代码至于复杂的省市区联动,不建议用纯javascript的,而是用ajax的方式,该不在此讨论范围内,想要了解aj ...

  7. 纯JavaScript实现HTML5 Canvas六种特效滤镜

    纯JavaScript实现HTML5 Canvas六种特效滤镜  小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...

  8. JavaScript自适应调整文字大小

    JavaScript自适应调整文字大小 今天有个任务,发现页面上的数字由于太长而与其他数字重叠了.这个数字还不能像文字那样只显示一部分,必须全部显示.想了一些办法都不行,最后把超过1000变成1K,大 ...

  9. 纯javascript验证，100行超精简代码。

    这篇文章转自--寒飞,原帖地址http://blog.csdn.net/luoyehanfei/article/details/42262249 QQ交流群235032949 纯javascript验 ...

随机推荐

  1. 看不到git远程分支

    1.先用fetch命令更新remote索引 $ git fetch 2.再查看remote分支,发现已经可以看到目标分支 $ git branch -a 3.再切换分支 $ git checkout ...

  2. 论文阅读笔记（七）YOLO

    You Only Look Once: Unified, Real-Time Object Detection Joseph Redmon, CVPR, 2016 1. 之前的目标检测工作将分类器用作 ...

  3. mac配置go使用gopm下载第三方包

    打开zshrc文件 vim ~/.zshrc 输入变量 export GOPATH="/Users/chennan/go" #这个自定义 export GOBIN=$GOPATH/ ...

  4. 蓝盾杯writeup

    由于比赛时只给了内网,web题目无法复现,这里就简单写一下misc的部分题目 1.眼花了吗 (默默吐槽居然是来自实验吧的原题) 提示:当眼花的时候会显示两张图,可以想到应该是包含双图的情况 用fore ...

  5. PHP客服聊天

    1.基于workman框架 github:https://github.com/walkor/workerman-chat 文档:http://www.workerman.net/gatewaydoc ...

  6. 8266编译错误 xtensa-lx106-elf/bin/ld: segmentled section `.text' will not fit in region `iram1_0_seg'

    一种简单的解决办法 Okay, the solution was to copy the libgcc.a file from: esp-open-sdk/ESP8266_NONOS/lib/ to ...

  7. tomcat 网页管理tomcat

    一.设置管理员账户密码 进入tomcat安装目录 ->进入conf目录->修改user.xml->加入下面内容 模板 <role rolename="manager- ...

  8. python数据类型之基础进阶

    一: 解构 1.1 结构字符串 变量和字符个数必须严格一致 name = 'wc' a,b=name print(a) print(b) # w # c name = 'w' a,b=name pri ...

  9. 合并多个对象并且去重的2种写法（es6）

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. 函数式编程 - 函数缓存Memoization

    函数式编程风格中有一个"纯函数"的概念,纯函数是一种无副作用的函数,除此之外纯函数还有一个显著的特点:对于同样的输入参数,总是返回同样的结果.在平时的开发过程中,我们也应该尽量把无 ...