在浏览器中dragdrop和resize对象

来源：互联网发布：淘宝链接转换无线工具编辑：程序博客网时间：2024/05/24 01:41

参考了网上的一些资料，完成以下代码

// 计算鼠标的当前坐标
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();
    }
}

加入页面中有id为drag的对象，
如果只使用resize功能

var r = new Resizer(document.getElementById('drag'), {minWidth:100, minHeight: 60, maxWidth:150, maxHeight:100});

如果只使用drag功能

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});