纯javascript实现可拖住/大小的div
好久没写了,不得不说人懒了好多..
也不打算实现什么太厉害的功能,因为不喜欢网上那些一大堆代码的,看的头晕,于是自己写了一个
旨在越简单越好(当然也走点形式- -其实是自己菜),所以一些宽度和高度都写死了,相信程序猿都知道怎么改的.- -
(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的更多相关文章
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- ECharts-基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表
ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...
- javascript日历控件——纯javascript版
平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. < ...
- 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10（排行榜界面&界面管理）
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...
- 纯Javascript实现Windows 8 Metro风格实现
Metro风格设计主要特点 1.Windows 8 Metro风格设计,实现网站或系统功能的导航 2.纯Javascript实现 3.支持所有IE.360.Chrome等常用浏览器 4.支持圆角.阴影 ...
- 纯javascript联动的例子
有人想要学习下纯javascript联动的一些技巧,我这里就以日期的联动为例,附上一些代码至于复杂的省市区联动,不建议用纯javascript的,而是用ajax的方式,该不在此讨论范围内,想要了解aj ...
- 纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜 小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...
- JavaScript自适应调整文字大小
JavaScript自适应调整文字大小 今天有个任务,发现页面上的数字由于太长而与其他数字重叠了.这个数字还不能像文字那样只显示一部分,必须全部显示.想了一些办法都不行,最后把超过1000变成1K,大 ...
- 纯javascript验证，100行超精简代码。
这篇文章转自--寒飞,原帖地址http://blog.csdn.net/luoyehanfei/article/details/42262249 QQ交流群235032949 纯javascript验 ...
随机推荐
- Python3 指定文件夹下所有文件（包括子目录下的文件）拷贝到目标文件夹下
#!/usr/bin/env python3 # -*- coding:utf8 -*- # @TIME :2018/9/17 9:02 # @Author:dazhan # @File :copyf ...
- Linux使用CFSSL自签TLS证书
⒈安装CFSSL wget https://pkg.cfssl.org/R1.2/cfssl_linux-amd64 wget https://pkg.cfssl.org/R1.2/cfssljson ...
- linux下双网卡双网关配置
要求: eth0:192.168.100.203 连接内网,网关为192.168.100.1.需要和192.168.10.0.192.168.12.0.192.168.100.0.10.2.2.0.1 ...
- 正则表达式匹配日期，支持闰年，格式为YYYYMMDD
年份:[\d]{4} 带31的月份:(0[13578]|1[02])((0[1-9])|([12][0-9])|(3[01])) 非2月不带31日的月份:((0[469])|11)((0[1-9])| ...
- HTTP协议详解（二）
接着第一篇学习.... 5 头域(首部) 每个头域由一个域名,冒号(:)和域值三部分组成.域名是大小写无关的,域值前可以添加任何数量的空格符,头域可以被扩展为多行,在每行开始处,使用至少一个空格或制表 ...
- iView -- TimePicker 自定义修改时间选择器选择时间面板样式
iView官方组件展示效果: 期望的最终效果: 为什么要修改期望效果? 项目需要只选择小时,分钟跟秒的不需要,而官方并没有直接相关的小时组件或者是设置显示成小时或分钟或秒的时间选择器,因为自己直接修改 ...
- GitLab实战操作指南
一.Git原理 1.Git是什么? Git是目前世界上最先进的分布式版本控制系统(没有之一). 2.Git有什么特点? 简单来说就是:高端大气上档次! 3.GIt与SVN区别 SVN管理: 属于集中式 ...
- linux常用命令及使用技巧(三)
文件管理与编辑 mkdir创建一个目录 mkdir [选项] 目录名 -m 设置存取权限 -p 可以一次创建多个目录 more命令读取文本文件,灭次显示一屏,并在每屏后暂停 cat命令将文件的内容输出 ...
- python爬取安居客二手房网站数据（转）
之前没课的时候写过安居客的爬虫,但那也是小打小闹,那这次呢, 还是小打小闹 哈哈,现在开始正式进行爬虫书写 首先,需要分析一下要爬取的网站的结构: 作为一名河南的学生,那就看看郑州的二手房信息吧! 在 ...
- java servlet的域对象
在进行网络编程中的项目时 经常用到的域对象主要包括以下三种: 1. ServletContext 作用范围比较大 代码如下: //一个请求代码: ServletContext sc = reques ...