zoukankan      html  css  js  c++  java
  • 纯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>

    不过....会有一个图标在那里...我暂时还不知道怎么去掉...有知道的告诉我哈.

     
  • 相关阅读:
    Java实现 LeetCode 382 链表随机节点
    Java实现 LeetCode 382 链表随机节点
    Java实现 LeetCode 381 O(1) 时间插入、删除和获取随机元素
    Java实现 LeetCode 381 O(1) 时间插入、删除和获取随机元素
    Java实现 LeetCode 381 O(1) 时间插入、删除和获取随机元素
    Java实现 LeetCode 380 常数时间插入、删除和获取随机元素
    Java实现 LeetCode 380 常数时间插入、删除和获取随机元素
    Linux下的iwpriv(iwlist、iwconfig)的简单应用
    OCX控件的注册卸载,以及判断是否注册
    .OCX、.dll文件注册命令Regsvr32的使用
  • 原文地址:https://www.cnblogs.com/cskk/p/jsdrag.html
Copyright © 2011-2022 走看看