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>