zoukankan      html  css  js  c++  java
  • 拖拽模块move2

    之前的模块代码太死板了,由于内部定义了控件的ID,使用起来很不方便,so-----直接看代码

    <script>
        var move =(function(){
            function drop(bar,target){
                var target=document.getElementById(target),bar=document.getElementById(bar);
                bar.onmousedown=drag;
                function drag(event){
                    event=event||window.event;
                    var ox=event.clientX-target.offsetLeft,oy=event.clientY-target.offsetTop;
                    document.onmousemove=function(event){
                        event=event||window.event;
                        var oh=document.documentElement.clientHeight,ow=document.documentElement.clientWidth,
                        maxy=oh-target.offsetHeight,maxx=ow-target.offsetWidth;
                        var x=event.clientX-ox,y=event.clientY-oy;
                        if(x<0)x=0;
                        else if(x>maxx)x=maxx;
                        if(y<0)y=0;
                        else if(y>maxy)y=maxy;
                        target.style.left=x+"px";
                        target.style.top=y+"px";
                    };
                    document.onmouseup=function(){
                        document.onmousemove=null;
                        document.onmouseup=null;
                    };
                }
            }
            return{
                go:drop
            }
        })();
        </script>

    乍一看,与之前的区别就是双引号放在模块里面和模块外面的区别;

    看这里:getElementByID(”bar”)和getElementByID(bar);

    前者只能获得ID名为#bar的控件,而后者可以获得任意ID名的控件(你想传啥就传啥,传不进来算我输!);

    所以,优化之后的模块适用于任意控件的拖拽;

    统一方法:move.go("获得鼠标点击事件的控件ID","你想移动的控件ID");

    例如我定义了两个控件ID:div1和div2---方法:move.go("div1","div2"),

    至此,over!

    小贴士:被移动的控件必须position:absolute;这个和模块无关,属于常识TT

    (我不怕千万人阻挡,只怕自己投降!)
  • 相关阅读:
    htpasswd命令
    GitHub访问速度慢的解决方法
    easyui datagrid 首次不加载做法
    Excel日常操作
    补偿接口中循环一直执行sql的问题
    rabbitMq无法消费发送的q的问题
    Unicode与中文转换工具类方法(转)
    idea 一些插件配置
    线程安全的集合类、CopyOnWrite机制介绍(转)
    java websocket学习
  • 原文地址:https://www.cnblogs.com/eco-just/p/7423826.html
Copyright © 2011-2022 走看看