zoukankan      html  css  js  c++  java
  • JavaScript拖拽 2.0

    我决定要以Chrome为榜样,飚版本号^_^

    var drag = {
        enable : function(domIdStr, titleDomIdStr){
            var dom = document.getElementById(domIdStr);
            dom.innerHTML = '<div id="dragHead"><span id="dragTitle"></span><a id="closeDrag">关闭</a></div>' + dom.innerHTML;
            var title = document.getElementById(titleDomIdStr);
            var close = document.getElementById("closeDrag");
            var head = document.getElementById('dragHead');
            var diffX = 0, diffY = 0, draging = false;
            dom.style.position = 'absolute';
            dom.style.zIndex = '1000';
            dom.style.visibility = 'visible';
            dom.style.width = '200px';
            dom.style.height = '100px';
            dom.style.backgroundColor = 'teal';
            head.style.cursor = 'move';
            head.style.margin = '0';
            head.style.backgroundColor = '#F2F2F2';
            head.style.border = '1px solid #CCC';
            head.style.padding = '5px';
            title.innerHTML = dom.title;
            close.style.cursor = 'pointer';
            close.style.cssFloat = 'right';
            
            
            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页面body标签内末尾添加

    <div id="drag" title="温馨提示"><!-- 此部分内容是用户自己添加的 --><div>今天天气不错,挺风和日丽的。</div></div>
    
  • 相关阅读:
    第十次作业
    第九次作业总结
    第九次作业
    第八次作业总结
    第七次作业总结
    第六次总结
    第十二次作业总结
    第十一次作业总结
    第十次作业总结
    第九次作业总结
  • 原文地址:https://www.cnblogs.com/realwall/p/2232206.html
Copyright © 2011-2022 走看看