• JavaScript拖拽 3.0


    var drag = {
        enable : function(){
            var domIdStr = arguments[0];
            var parameter = {};
            if(arguments.length == 2){
                parameter = arguments[1];
            }
            var dom = document.getElementById(domIdStr);
            dom.innerHTML = '<div id="' + domIdStr + 'dragHead"><span id="' + domIdStr + 'dragTitle"></span><a id="' + domIdStr + 'closeDrag">关闭</a></div>' + dom.innerHTML;
            var title = document.getElementById(domIdStr + 'dragTitle');
            var close = document.getElementById(domIdStr + 'closeDrag');
            var head = document.getElementById(domIdStr + 'dragHead');
            var diffX = 0, diffY = 0, draging = false;
            dom.style.position = 'absolute';
            dom.style.zIndex = parameter.zIndex || '1000';
            dom.style.borderRadius = parameter.borderRadius || '4px';
            dom.style.visibility = 'visible';
            dom.style.width = parameter.width || '280px';
            dom.style.height = parameter.height || '230px';
            dom.style.backgroundColor = parameter.backgroundColor || '#F8F8F8';
            var left, top, cWidth, cHeight, dWidth = dom.offsetWidth, dHeight = dom.offsetHeight;
            if(document.compatMode == "BackCompat"){
                cWidth = document.body.clientWidth;
                cHeight = document.body.clientHeight;
            }else{
                cWidth = document.documentElement.clientWidth;
                cHeight = document.documentElement.clientHeight;
            }
            left = cWidth/2 - dWidth/2;
            top = cHeight/2 - dHeight/2;
            dom.style.left = parameter.left || left + 'px';
            dom.style.top = parameter.right || top + 'px';
            dom.style.border = '1px solid #CCC';
            head.style.cursor = 'move';
            head.style.margin = '0';
            head.style.backgroundColor = '#F2F2F2';
            head.style.borderBottom = '1px solid #CCC';
            head.style.padding = '5px';
            title.innerHTML = dom.title;
            close.style.cursor = 'pointer';
            close.style.cssFloat = 'right'; //Firefox
            close.style.styleFloat = 'right'; //IE
            
            head.onmousedown = function(e){
                e = e || window.event;
                draging = true;
    			diffX = e.clientX - dom.offsetLeft;
    			diffY = e.clientY - dom.offsetTop;
    			if(head.setCapture){
    			    head.setCapture();
    			}
    			head.onmousemove = function(e){
                    e = e || window.event;
    		        if(draging){
            	        dom.style.left = (e.clientX - diffX) + 'px';
            	        dom.style.top = (e.clientY - diffY) + 'px';
    		        }
                };
    	        head.onmouseup = function(e){
    		        e = e || window.event;
    		        if(head.releaseCapture){
    		            head.releaseCapture();
    		        }
    		        draging = false;
    		        head.onmousemove = null;
    		        head.onmouseup = null;
    	        };
            };
            
            close.onclick = function(){
                dom.style.visibility = 'hidden';
            };
        },
        disable: function(domIdStr){
            var dom = document.getElementById(domIdStr);
            dom.style.visibility = 'hidden';
        }
    };
    

     用法:在HTML页面添加

    <div id="drag" title="温馨提示"><div>此JavaScript拖拽版本号已飚到3.0</div></div>
    
  • 相关阅读:
    juicer 语法
    mvc 理解
    php 之 trait
    阿里P8面试官:如何设计一个扛住千万级并发的架构?
    建模
    镜像推送时出现 server gave HTTP response to HTTPS client 问题的解决方法
    git在线练习网站
    ubuntu 20.04 LTS 更换阿里云源
    Proxmox VE(Proxmox Virtual Environment)制作优盘(U盘)启动盘的教程说明方法
    KubeSphere部署Nacos集群
  • 原文地址:https://www.cnblogs.com/realwall/p/2232299.html
Copyright © 2020-2023  润新知