纯javascript实现可拖住/大小的div

浏览数：27 / 时间：2015年06月08日

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

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

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

(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>