拖拽效果在我们上网的过程中是很常见的，大家都应该在电脑上面登陆过qq吧，当这个qq的登陆框弹出来的时候，我们是可以进行拖动的。这就是一个拖拽效果
这是我在慕课网上面看到的，我直接拿过来了，地址 http://www.imooc.com/learn/60
这个视频讲的蛮好的，一清二楚，不懂的可以去看看。
首先，理清楚一下总体的思路。
第一步：当鼠标按下弹出框某个区域的时候，可以进行拖拽
第二步：弹出框拖拽进行中
第三部：鼠标松开，弹出框拖动到了某个位置。
先上源代码。这个是慕课网的老师提供的 。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>拖拽效果</title><style type="text/css"> ???body{background: url(images/baidu_demo.png) #fff top center no-repeat;padding: 0px;margin: 0px;font-size: 12px;font-family: "微软雅黑";} ???.link{text-align: right;line-height: 20px;padding-right: 40px;} ???.ui-dialog{ ???????width: 380px;height: auto;display: none; ???????position: absolute;z-index: 9000; ???????top: 0px;left: 0px; ???????border: 1px solid #D5D5D5;background: #fff; ???} ???.ui-dialog a{text-decoration: none;} ???.ui-dialog-title{ ???????height: 48px;line-height: 48px; padding:0px 20px;color: #535353;font-size: 16px; ???????border-bottom: 1px solid #efefef;background: #f5f5f5; ???????cursor: move; ???????user-select:none; ???} ???.ui-dialog-closebutton{ ???????width: 16px;height: 16px;display: block; ???????position: absolute;top: 12px;right: 20px; ???????background: url(images/close_def.png) no-repeat;cursor: pointer; ???} ???.ui-dialog-closebutton:hover{background:url(images/close_hov.png);} ???.ui-dialog-content{ ???????padding: 15px 20px; ???} ???.ui-dialog-pt15{ ???????padding-top: 15px; ???} ???.ui-dialog-l40{ ???????height: 40px;line-height: 40px; ???????text-align: right; ???} ???.ui-dialog-input{ ???????width: 100%;height: 40px; ???????margin: 0px;padding:0px; ???????border: 1px solid #d5d5d5; ???????font-size: 16px;color: #c1c1c1; ???????text-indent: 25px; ???????outline: none; ???} ???.ui-dialog-input-username{ ???????background: url(images/input_username.png) no-repeat 2px ; ???} ???.ui-dialog-input-password{ ???????background: url(images/input_password.png) no-repeat 2px ; ???} ???.ui-dialog-submit{ ???????width: 100%;height: 50px;background: #3b7ae3;border:none;font-size: 16px;color: #fff; ???????outline: none;text-decoration: none; ???????display: block;text-align: center;line-height: 50px; ???} ???.ui-dialog-submit:hover{ ???????background: #3f81b0; ???} ???.ui-mask{ ???????width: 100%;height:100%;background: #000; ???????position: absolute;top: 0px;height: 0px;z-index: 8000; ???????opacity:0.4; filter: Alpha(opacity=40); ???}</style></head><body ><div class="link"> ???<a href="javascript:showDialog();">登录</a></div><div class="ui-mask" id="mask" onselectstart="return false"></div><div class="ui-dialog" id="dialogMove" onselectstart=‘return false;‘> ???<div class="ui-dialog-title" id="dialogDrag" ?onselectstart="return false;" > ???????登录通行证 ???????<a class="ui-dialog-closebutton" href="javascript:hideDialog();"></a> ???</div> ???<div class="ui-dialog-content"> ???????<div class="ui-dialog-l40 ui-dialog-pt15"> ???????????<input class="ui-dialog-input ui-dialog-input-username" type="input" value="手机/邮箱/用户名" /> ???????</div> ???????<div class="ui-dialog-l40 ui-dialog-pt15"> ???????????<input class="ui-dialog-input ui-dialog-input-password" type="input" value="密码" /> ???????</div> ???????<div class="ui-dialog-l40"> ???????????<a href="#">忘记密码</a> ???????</div> ???????<div> ???????????<a class="ui-dialog-submit" href="#" >登录</a> ???????</div> ???????<div class="ui-dialog-l40"> ???????????<a href="#">立即注册</a> ???????</div> ???</div></div><script type="text/javascript"> ???var dialogInstace , onMoveStartId , mousePos = {x:0,y:0}; ???// ???用于记录当前可拖拽的对象 ???// var zIndex = 9000; ???// ???获取元素对象 ???function g(id){return document.getElementById(id);} ???// ???自动居中元素（el = Element） ???function autoCenter( el ){ ???????var bodyW = document.documentElement.clientWidth; ???????var bodyH = document.documentElement.clientHeight; ???????var elW = el.offsetWidth; ???????var elH = el.offsetHeight; ???????el.style.left = (bodyW-elW)/2 + ‘px‘; ???????el.style.top = (bodyH-elH)/2 + ‘px‘; ???} ???// ???自动扩展元素到全部显示区域 ???function fillToBody( el ){ ???????el.style.width ?= document.documentElement.clientWidth ?+‘px‘; ???????el.style.height = document.documentElement.clientHeight + ‘px‘; ???} ???// ???Dialog实例化的方法 ???function Dialog( dragId , moveId ){ ???????var instace = {} ; ???????instace.dragElement ?= g(dragId); ???// ???允许执行 拖拽操作 的元素 ???????instace.moveElement ?= g(moveId); ???// ???拖拽操作时，移动的元素 ???????instace.mouseOffsetLeft = 0; ???????????// ???拖拽操作时，移动元素的起始 X 点 ???????instace.mouseOffsetTop = 0; ???????????// ???拖拽操作时，移动元素的起始 Y 点 ???????instace.dragElement.addEventListener(‘mousedown‘,function(e){ ???????????var e = e || window.event; ???????????dialogInstace = instace; ???????????instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft ; ???????????instace.mouseOffsetTop ?= e.pageY - instace.moveElement.offsetTop ; ???????????onMoveStartId = setInterval(onMoveStart,10); ???????????return false; ???????????// instace.moveElement.style.zIndex = zIndex ++; ???????}) ???????return instace; ???} ???// ???在页面中侦听 鼠标弹起事件 ???document.onmouseup = function(e){ ???????dialogInstace = false; ???????clearInterval(onMoveStartId); ???} ???document.onmousemove = function( e ){ ???????var e = window.event || e; ???????mousePos.x = e.clientX; ???????mousePos.y = e.clientY; ???????e.stopPropagation && e.stopPropagation(); ???????e.cancelBubble = true; ???????e = this.originalEvent; ???????e && ( e.preventDefault ? e.preventDefault() : e.returnValue = false ); ???????document.body.style.MozUserSelect = ‘none‘; ???} ???function onMoveStart(){ ???????var instace = dialogInstace; ???????if (instace) { ???????????var maxX = document.documentElement.clientWidth - ?instace.moveElement.offsetWidth; ???????????var maxY = document.documentElement.clientHeight - instace.moveElement.offsetHeight ; ???????????instace.moveElement.style.left = Math.min( Math.max( ( mousePos.x - instace.mouseOffsetLeft) , 0 ) , maxX) + "px"; ???????????instace.moveElement.style.top ?= Math.min( Math.max( ( mousePos.y - instace.mouseOffsetTop ) , 0 ) , maxY) + "px"; ???????} ???} ???// ???重新调整对话框的位置和遮罩，并且展现 ???function showDialog(){ ???????g(‘dialogMove‘).style.display = ‘block‘; ???????g(‘mask‘).style.display = ‘block‘; ???????autoCenter( g(‘dialogMove‘) ); ???????fillToBody( g(‘mask‘) ); ???} ???// ???关闭对话框 ???function hideDialog(){ ???????g(‘dialogMove‘).style.display = ‘none‘; ???????g(‘mask‘).style.display = ‘none‘; ???} ???// ???侦听浏览器窗口大小变化 ???window.onresize = showDialog; ???Dialog(‘dialogDrag‘,‘dialogMove‘); ???showDialog();</script></body><js/html>看看js代码
1） 获取元素对象
function g(id){return document.getElementById(id);}这个很简单，就是一个对 document.getElementById方法的封装，用来获取页面的元素
2）自动居中元素
function autoCenter( el ){ ???????var bodyW = document.documentElement.clientWidth; ???????var bodyH = document.documentElement.clientHeight; ???????var elW = el.offsetWidth; ???????var elH = el.offsetHeight; ???????el.style.left = (bodyW-elW)/2 + ‘px‘; ???????el.style.top = (bodyH-elH)/2 + ‘px‘; ???}这里有一个document.documentElement.clientWidth 和 el.offsetWidth ，这两个是什么宽度？
这里也有一个视频。可以去看看，讲的蛮仔细的 http://www.imooc.com/learn/608 这个老师的风格有点奇葩，做好心理准备
js实现鼠标的拖拽效果
原文地址：http://www.cnblogs.com/yiyistar/p/7466606.html