参考了网上的一些资料,完成以下代码
加入页面中有id为drag的对象,
如果只使用resize功能
如果只使用drag功能
如果同时使用
- // 计算鼠标的当前坐标
- function getCursorPos(e) {
- var p = {X: 0, Y: 0};
- p.X = e.layerX ? e.layerX : e.offsetX;
- p.Y = e.layerY ? e.layerY : e.offsetY;
- var se = e.srcElement || e.target;
- while (se) {
- p.X += se.layerLeft ? se.layerLeft : se.offsetLeft;
- p.Y += se.layerTop ? se.layerTop : se.offsetTop;
- se = se.offsetParent;
- }
- return p;
- }
- /* 说明
- * 功能:使对象可以拖动
- * 参数:
- * o 要拖动的对象
- * evt 此参数可以包含4个对象
- begin(userData, bl, bp); // 开始拖动 userData 用户数据 bl 对象起始位置坐标 bp 鼠标起始坐标
- dragging(userData, mp, dp); // 拖动中 userData 用户数据 mp 鼠标当前坐标 dp mp相对于bp的变化
- end(userData); // 拖动停止
- resizer // 如果该对象还要缩放大小,则传入,类型为Resizer
- * userData 用户数据
- */
- function dragable(o, evt, userData) {
- var oldEvent = o.onmousedown;
- o.onmousedown = function(a) {
- if (oldEvent)
- oldEvent(a);
- var d = document;
- a = a || window.event;
- var bl = {Y: parseInt(o.style.top), X: parseInt(o.style.left)};
- var bp = getCursorPos(a);
- if (evt)
- if (evt.begin)
- evt.begin(userData, bl, bp);
- if(o.setCapture)
- o.setCapture();
- else if(window.captureEvents)
- window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
- d.onmousemove = function(a) {
- a = a || window.event;
- var mp = getCursorPos(a); // 鼠标当前坐标
- if (mp) {
- var dp = {X: mp.X- bp.X, Y: mp.Y - bp.Y}; // 鼠标位置变化值
- o.style.left = bl.X + dp.X;
- o.style.top = bl.Y + dp.Y;
- if (evt) {
- if (evt.dragging)
- evt.dragging(userData, mp, dp);
- if (evt.resizer)
- evt.resizer.showTags();
- }
- }
- };
- d.onmouseup = function(){
- if(o.releaseCapture)
- o.releaseCapture();
- else if(window.captureEvents)
- window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
- d.onmousemove = null;
- d.onmouseup = null;
- if (evt)
- {
- if (evt.end)
- evt.end(userData);
- if (evt.resizer)
- evt.resizer.showTags();
- }
- };
- };
- }
- /* 说明
- * 功能:使对象可以缩放,在对象可以拖动时,一般把创建的Resizer作为evt.resizer传给dragable
- * 参数:
- * o 要缩放的对象
- * limit 此参数可以包含4个对象
- maxWidth 最大宽度
- minWidth 最小宽度
- maxHeight 最大高度
- minHeight 最小高度
- */
- function Resizer(o, limit) {
- var self = this;
- var tags = null;
- var bound = {};
- function getSize() {
- var style = o.style;
- var left = parseInt(style.left);
- var top = parseInt(style.top);
- var te = o.offsetParent;
- while(te && (te != o.parentNode)) {
- left += te.layerLeft ? te.layerLeft : te.offsetLeft;
- top += te.layerTop ? te.layerTop : te.offsetTop;
- te = te.offsetParent;
- }
- var width = style.width == 'auto' ? obj.scrollWidth : parseInt(style.width);
- var height = style.height == 'auto' ? obj.scrollHeight : parseInt(style.height);
- bound = {x: left, y: top, rx: left + width, by: top + height, w: width, h: height};
- }
- function setPos(obj, x, y, v) {
- obj.style.top = y;
- obj.style.left = x;
- obj.style.visibility = v;
- }
- this.showTags = function (h) {
- if (! tags) {
- tags = {};
- tags['nw-resize'] = document.createElement('div');
- tags['n-resize'] = document.createElement('div');
- tags['ne-resize'] = document.createElement('div');
- tags['e-resize'] = document.createElement('div');
- tags['se-resize'] = document.createElement('div');
- tags['s-resize'] = document.createElement('div');
- tags['sw-resize'] = document.createElement('div');
- tags['w-resize'] = document.createElement('div');
- var node = o.parentNode;
- if (! node) node = document.body;
- for (var p in tags) {
- tags[p].style.position = 'absolute';
- tags[p].style.border = 'solid 1px black';
- tags[p].style.backgroundColor = 'white';
- tags[p].style.fontSize = 1;
- tags[p].style.width = 5;
- tags[p].style.height = 5;
- tags[p].style.cursor = p;
- node.appendChild(tags[p]);
- dragable(tags[p], self, p);
- }
- }
- getSize();
- var visible = 'visible';
- if (h) visible = 'hidden';
- setPos(tags['nw-resize'], bound.x - 1, bound.y - 1, visible);
- setPos(tags['n-resize'], bound.x + bound.w / 2 - 1, bound.y - 1, visible);
- setPos(tags['ne-resize'], bound.rx - 2, bound.y - 1, visible);
- setPos(tags['e-resize'], bound.rx - 2, bound.y + bound.h / 2 , visible);
- setPos(tags['se-resize'], bound.rx - 2, bound.by - 2, visible);
- setPos(tags['s-resize'], bound.x + bound.w / 2 - 1, bound.by - 2, visible);
- setPos(tags['sw-resize'], bound.x - 1, bound.by - 2, visible);
- setPos(tags['w-resize'], bound.x - 1, bound.y + bound.h / 2, visible);
- }
- var bl = {h: parseInt(o.style.height), w: parseInt(o.style.width)};
- function LimitW(w) {
- if (limit) {
- if (limit.maxWidth)
- if (w > limit.maxWidth)
- w = limit.maxWidth;
- if (limit.minWidth)
- if (w < limit.minWidth)
- w = limit.minWidth;
- }
- return w;
- }
- function LimitH(h) {
- if (limit) {
- if (limit.maxHeight)
- if (h > limit.maxHeight)
- h = limit.maxHeight;
- if (limit.minWidth)
- if (h < limit.minHeight)
- h = limit.minHeight;
- }
- return h;
- }
- this.dragging = function(type, mp, dp) {
- var w = parseInt(o.style.width);
- var h = parseInt(o.style.height);
- if (type == 'e-resize') {
- if (bl.w + dp.X > 0)
- w = LimitW(bl.w + dp.X);
- }
- if (type == 'se-resize') {
- if (bl.w + dp.X > 0)
- w = LimitW(bl.w + dp.X);
- if (bl.h + dp.Y > 0)
- h = LimitH(bl.h + dp.Y);
- }
- if (type == 's-resize') {
- if (bl.h + dp.Y > 0)
- h = LimitH(bl.h + dp.Y);
- }
- o.style.width = w;
- o.style.height = h;
- self.showTags();
- }
- this.end = function(type) {
- bl = {h: parseInt(o.style.height), w: parseInt(o.style.width)};
- }
- o.onmousedown = function (e) {
- self.showTags();
- }
- }
如果只使用resize功能
- var r = new Resizer(document.getElementById('drag'), {minWidth:100, minHeight: 60, maxWidth:150, maxHeight:100});
- dragable(document.getElementById('drag'));
- var r = new Resizer(document.getElementById('drag'), {minWidth:100, minHeight: 60, maxWidth:150, maxHeight:100});
- dragable(document.getElementById('drag'), {resizer: r});