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

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

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

(function () {

    DragSize.prototype = {//为DriagSize方法添加其他属性以便调用

        getMove: function(obj) {

            var self = this;

            obj.onmousedown = function(ev) {//为绑定的div绑定鼠标按下事件

                var oBox = self.dom;

                var oEvent = ev || event;

                var disX = oEvent.clientX - this.offsetLeft;

                var disY = oEvent.clientY - this.offsetTop;

                oEvent.cancelBubble = true;//阻止默认

                document.onmousemove = function(ev) {  //给页面绑定一个mousemove事件,用于拖动或者拖拽大小时用

                    var oEvent = ev || event;

                    var oRrsizeX = oEvent.clientX - disX;

                    var oRrsizeY = oEvent.clientY - disY;

                    obj.style.left = oRrsizeX + "px";

                    obj.style.top = oRrsizeY + "px";

                    if (obj == self.dragDiv) {

                        if (oRrsizeX < 10) {//这里的10写死了,因为用于拖拽的点我写死了10px

                            oRrsizeX = 10;

                        }

                        if (oRrsizeY < 10) {//这里的10写死了,因为用于拖拽的点我写死了10px

                            oRrsizeY = 10;

                        }

                        oBox.style.width = oRrsizeX + obj.offsetWidth + "px";

                        oBox.style.height = oRrsizeY + obj.offsetHeight + "px";

                        obj.style.left = oRrsizeX + "px";

                        obj.style.top = oRrsizeY + "px";

                    }

                    return false;

                }

                document.onmouseup = function() {//鼠标弹起时别忘了把其他事件给取消了哈

                    document.onmousemove = null;

                    document.onnouseup = null;

                }

                return false;

            }

        }

    };

})();

function DragSize(dom) {

    var self = this;

    self.dom = dom;

    self.dragDiv = createDragDiv();

    if (self.dom && self.dom.tagName == "DIV") {

        self.dom.appendChild(self.dragDiv);

        self.getMove(self.dom);

        self.getMove(self.dragDiv);

    } else {

        throw "Wrong dom for binding.";

    }

    return self;

}

//生成一个显示在右下角的点

function createDragDiv() {

    var div = document.createElement("DIV");

    div.style.width = div.style.height = "10px";

    div.style.background = "#6D71EF";

    div.style.position = "absolute";

    div.style.right= "0px";

    div.style.bottom= "0px";

    div.style.cursor = "se-resize";

    return div;

}

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>可拖拽div大小呵呵呵呵呵</title>

<style type="text/css">

    *{ padding:0; margin:0;}

    #box,#Div1{ width:100px; height:100px; background:#CCCCCC; border:1px solid #990033; position:absolute;}

</style>

    <script src="DragSize.js" type="text/javascript"></script>

<script type="text/javascript">

    window.onload = function() {

        var oBox = document.getElementById('box');

        var aa = new DragSize(oBox);

    };

</script>

</head>

<body>

    <div id="box">

    </div>

</body>

</html>

这样就可以了,看下效果

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

好了,结束了.

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

<html>

<head>

</head>

<body >

<script language="javascript">

    function resizeImage(evt, name) {

        newX = evt.x;

        newY = evt.y;

        eval("document." + name + ".width=newX");

        eval("document." + name + ".height=newY");

    }

</script>

<img src="MiniMap.jpg" width="150" height="60" name="image" ondrag="resizeImage(event,'image')">

</body></html>

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

 

纯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. [系统集成] 基于 elasticsearch 的企业监控方案

    注: 2017年10月16日: 使用中发现 es 查询时序数据的性能较差,且 watch 脚本的编写比较麻烦,因此已将监控系统切换到了 influxdb+grafana平台.新监控系统各方面情况比较满 ...

  2. SVM小白教程（1）：目标函数

    关于 SVM(支持向量机),网上教程实在太多了,但真正能把内容讲清楚的少之又少.这段时间在网上看到一个老外的 svm 教程,几乎是我看过的所有教程中最好的.这里打算通过几篇文章,把我对教程的理解记录成 ...

  3. 为什么使用SLF4J?

      每个Java开发人员都知道日志记录对Java应用的重要性,尤其是对服务端应用,而且其中许多人都已经熟悉了各种记录日志的库,比如java.util.logging,Apache的log4j,logb ...

  4. [Kubernetes]深入理解StatefulSet

    前面我写的一系列博客,如果你能够耐心看到这一篇,那你应该对一个概念就不是太陌生了:Deployment. 为什么提这个概念呢,这就要说到Deployment的一个不足了.Deployment不足以覆盖 ...

  5. pmi-ACP考试知识点梳理（部分）

    敏捷宣言 个体和互动 高于流程和工具 工作的软件 高于详尽的文档 客户合作 高于合同谈判 响应变化 高于遵循计划 十二条敏捷原则 1 我们最重要的目标,是通过持续不断地及早交付有价值的软件使客户满意. ...

  6. 网站robots.txt & sitemap.xml

    1. 如何查看网站的robots.txt 网址/robots.txt, 比如小米  https://www.mi.com/robots.txt sitemap.xml

  7. Ubuntu VMware workstation虚拟机清理缓存文件获得更大硬盘空间

    1 前言 VMware workstation 15 Player经常使用拖拉复制文件到虚拟机,从而导致了drag_and_drop特别大,占用了很多硬盘空间. fanbi@ubuntu:~/.cac ...

  8. Helloworld——SpringMVC

    搭建环境:eclipse 这里需要配置Server runtime environment——Apache Tomcat 到官网下载 解压 在eclipse中: Window perferences ...

  9. 用Mysql进行emp、dept、salgrade表的相关查询操作

    初学者都会接触到三种表:emp.dept.salgrade表,进行练习各种语句操作再合适不过 但是,网上大多数的操作语句都是用oracle进行操作的,小编在学习mysql的时候,参考网上的书写遇到了不 ...

  10. 定时任务框架Quartz-(一)Quartz入门与Demo搭建

    注:本文来源于:是Guava不是瓜娃  <定时任务框架Quartz-(一)Quartz入门与Demo搭建> 一.什么是Quartz 什么是Quartz? Quartz是OpenSympho ...