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/archive/2011/11/01/2232206.html