好久没写了,不得不说人懒了好多..
也不打算实现什么太厉害的功能,因为不喜欢网上那些一大堆代码的,看的头晕,于是自己写了一个
旨在越简单越好(当然也走点形式- -其实是自己菜),所以一些宽度和高度都写死了,相信程序猿都知道怎么改的.- -
(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>
不过....会有一个图标在那里...我暂时还不知道怎么去掉...有知道的告诉我哈.
