后使用快捷导航没有帐号？
只需一步，快速开始
查看: 7158|回复: 13
求助，怎样能让一个div在固定的父div中任意拖动！
UID509163在线时间 小时积分228帖子离线17181 天注册时间
中级会员, 积分 228, 距离下一级还需 272 积分
谢谢大家； 本人js水平初学，网上大部分的例子是全屏拖动！
UID521800在线时间 小时积分232帖子离线17181 天注册时间
中级会员, 积分 232, 距离下一级还需 268 积分
给拖动加个限制就行了
UID509163在线时间 小时积分228帖子离线17181 天注册时间
中级会员, 积分 228, 距离下一级还需 272 积分
谁有现成的demo。可以发个链接。我自己去研究！！感激不尽！
UID498332在线时间 小时积分1875帖子离线17181 天注册时间
银牌会员, 积分 1875, 距离下一级还需 1125 积分
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&style type=&text/css&&
body{background:#}
.block{position:left:0;top:100border:1px solid #000;background:width:30height:30}
#google{width:300height:300border:2px inset #background:#position:overflow:}
&div id=&google&&&div id=&main& class=&block&&&/div&&/div&
&script type=&text/javascript&&
//&![CDATA[
function Drag(title,body,range){
var w=window,win=body||title,x,y,_left,_top,range=range||function(x){return x};
title.style.cursor='move';
title.onmousedown=function (e){
x=e.clientX,y=e.clientY,_left=win.offsetLeft,_top=win.offsetT
this.ondragstart=function(){return false};
document.onmousemove=e_
document.onmouseup=undrag
function e_move(e){
var cl=range(_left+e.clientX-x,'x'),ct=range(_top+e.clientY-y,'y');
win.style.left=cl+'px';
win.style.top=ct+'px';
w.getSelection?w.getSelection().removeAllRanges():
document.selection.empty();
function undrag(){this.onmousemove=null};
function $(x){return typeof x=='string'?document.getElementById(x):x};
var google=$(&google&),main=$('main');
x:google.offsetWidth-main.offsetWidth-4,
y:google.offsetHeight-main.offsetHeight-4
function(x,type){return Math.max(0,Math.min(max[type],x))}
&提示：您可以先修改部分代码再运行
UID409756在线时间 小时积分1738帖子离线17181 天注册时间
银牌会员, 积分 1738, 距离下一级还需 1262 积分
回复 4# kfguoguo
太佩服4L了.
UID528700在线时间 小时积分177帖子离线17181 天注册时间
初级会员, 积分 177, 距离下一级还需 23 积分
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&无标题文档&/title&
#big{ border:1px solid #FF3300; width:300 height:300 position:}
#small{ background:#99CC00; width:50 height:50 position: cursor:}
&script language=&javascript&&
function small_down(){
var obig=document.getElementById(&big&);
var osmall=document.getElementById(&small&);
var e=window.
document.onmousemove=small_
document.onmouseup=small_
osmall.startX=e.clientX-osmall.offsetL
osmall.startY=e.clientY-osmall.offsetT
function small_move(){
var obig=document.getElementById(&big&);
var osmall=document.getElementById(&small&);
var e=window.
osmall.style.left=e.clientX-osmall.startX;
osmall.style.top=e.clientY-osmall.startY;
if(e.clientX-osmall.startX&=0){ osmall.style.left=0;}
if(e.clientY-osmall.startY&=0){ osmall.style.top=0;}
if(e.clientX-osmall.startX&=250){ osmall.style.left=250;}
if(e.clientY-osmall.startY&=250){ osmall.style.top=250;}
function small_up(){
var obig=document.getElementById(&big&);
var osmall=document.getElementById(&small&);
var e=window.
document.onmousemove=&&;
document.onmouseup=&&;
&div id= &big&&
&div id=&small& onmousedown=&small_down()&&&/div&
&提示：您可以先修改部分代码再运行
看不懂四楼的就看我的好了
UID509163在线时间 小时积分228帖子离线17181 天注册时间
中级会员, 积分 228, 距离下一级还需 272 积分
感谢大家，受用了！
UID394105在线时间 小时积分282帖子离线17181 天注册时间
中级会员, 积分 282, 距离下一级还需 218 积分
回复 6# huanzai8
好像拖不动小方块？
UID184617在线时间 小时积分384帖子离线17181 天注册时间
中级会员, 积分 384, 距离下一级还需 116 积分
6楼的在CHROME下无效。。
UID528700在线时间 小时积分177帖子离线17181 天注册时间
初级会员, 积分 177, 距离下一级还需 23 积分
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&无标题文档&/title&
#big{ border:1px solid #FF3300; width:300 height:300 position:}
#small{ background:#99CC00; width:50 height:50 position: cursor:}
&script language=&javascript&&
function small_down(e){
var obig=document.getElementById(&big&);
var osmall=document.getElementById(&small&);
var e=e||window.
document.onmousemove=small_
document.onmouseup=small_
osmall.startX=e.clientX-osmall.offsetL
osmall.startY=e.clientY-osmall.offsetT
function small_move(e){
var obig=document.getElementById(&big&);
var osmall=document.getElementById(&small&);
var e=e||window.
osmall.style.left=e.clientX-osmall.startX+&px&;
osmall.style.top=e.clientY-osmall.startY+&px&;
if(e.clientX-osmall.startX&=0){ osmall.style.left=0+&px&;}
if(e.clientY-osmall.startY&=0){ osmall.style.top=0+&px&;}
if(e.clientX-osmall.startX&=250){ osmall.style.left=250+&px&;}
if(e.clientY-osmall.startY&=250){ osmall.style.top=250+&px&;}
function small_up(){
document.onmousemove=&&;
document.onmouseup=&&;
&div id= &big&&
&div id=&small& onmousedown=&small_down(event)&&&/div&
&提示：您可以先修改部分代码再运行
稍微完善了一下，让它在ff中也可以动，ff的window.event函数是内置函数，所以要传入值，大家可以对比6楼的参考一下
UID498150在线时间 小时积分570帖子离线17181 天注册时间
高级会员, 积分 570, 距离下一级还需 430 积分
UID505625在线时间 小时积分1751帖子离线17181 天注册时间
银牌会员, 积分 1751, 距离下一级还需 1249 积分
受教了&&哪来研究一下
UID403039在线时间 小时积分326帖子离线17181 天注册时间
中级会员, 积分 326, 距离下一级还需 174 积分
很好，学习了
UID609455在线时间 小时积分11帖子离线17181 天注册时间
新手上路, 积分 11, 距离下一级还需 39 积分
我也来一份代码。DOCTYPE html PUBLIC &-//W3C//DTD HTML 4.01//EN&
& &&http://www.w3.org/TR/html4/strict.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml& lang=&en&&
&head&
& & & & &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
& & & & &title&test2&/title&
& & & & &meta name=&author& content=&zhuzhenchao& /&
& & & & &!-- Date:
--&
& & & & &style type=&text/css&&
& & & & & & & & ul{list-style-type:}
& & & & & & & & li{float:}
& & & & & & & & body, div, dl, dt, dd, ul, ol, li,
& & & & & & & & h1, h2, h3, h4, h5, h6, pre, code,
& & & & & & & & form, fieldset, legend, input, button,
& & & & & & & & textarea, p, blockquote, th, td {
& & & & & & margin: 0;
& & & & & & padding: 0;
& & & & & & font-size:10
& & & & & & & & }
& & & & & & & & #edit{width:470 border:1 position: cursor:}
& & & & & & & & #edit_content{width:460 height:30 overflow:}
& & & & & & & & #edit_content ul li{display:inline- height:30 width:60 margin-left:10}
& & & & & & & & #edit_bottom a{margin-left:10}
& & & & &/style&
& & & &
&/head&
&body&
& & & & &div&&id=&edit&&
& & & & & & & & &div id=&edit_content&&
& & & & & & & & & & & & &ul&
& & & & & & & & & & & & & & & & &li&&a&可视化修改&/a&&/li&
& & & & & & & & & & & & & & & & &li&&a&代码修改&/a&&/li&
& & & & & & & & & & & & & & & & &li&&a&修改记录&/a&&/li&
& & & & & & & & & & & & &/ul&
& & & & & & & & &/div&
& & & & & & & & &div id=&edit_tab1_content&&&/div&
& & & & & & & & &div id=&edit_tab2_content& style=&visibility: hidden&&&/div&
& & & & & & & & &div id=&edit_tab3_content& style=&visibility:hidden&&&/div&
& & & & &/div&
&/body&
&script&
& & & & var o = {
& & & & & & & & x : 0,
& & & & & & & & y : 0,
& & & & }
& & & & var $ = function(id) {
& & & & & & & & return &string& == typeof(id) ? document.getElementById(id) :
& & & & }
& & & & var drag = $(&edit&);
& & & & window.onload = function() {
& & & & & & & & drag.addEventListener(&mousedown&, getstart, false);
& & & & }
& & & & function getstart(event) {
& & & & & & & & o.x = event.clientX - drag.offsetL
& & & & & & & & o.y = event.clientY - drag.offsetT
& & & & & & & & document.onmousemove = m_
& & & & & & & & document.onmouseup =& & & & & & & &
& & & & }
& & & & function m_move(e) {
& & & & & & & & drag.style.left = event.clientX - o.x + &px&;
& & & & & & & & drag.style.top = event.clientY - o.y + &px&;& & & &
& & & & }
& & & & function undrag() {
& & & & & & & & this.onmousemove =
& & & & }
&/script&
&/html&复制代码
Powered by在禁止了页面的触摸拖动事件之后如何允许某div可以拖动_问答_ThinkSAAS
在禁止了页面的触摸拖动事件之后如何允许某div可以拖动
在禁止了页面的触摸拖动事件之后如何允许某div可以拖动
针对 IOS 上的 safari
目的是禁止默认的拖动事件
但允许其中某div的滚动拖拽
禁止拖动的默认事件
document.body.ontouchmove=function(e){
e.preventDefault();
下面链接的搜索按钮打开之后的列表需要拖动
但要禁止全局拖动（带反弹效果的默认拖动效果）
还有个奇怪的现象 在触发了设置IOS safari特有的滚动样式的div的拖动事件 页面会自动禁止惯性拖动 猜测可能可以利用这个特性
有个插件叫，你可以用这个轮子。
当然，自己实现这个轮子也很简单。
每个页面都设置一个 id，每个点都是&a&，然后其 href 就设置为 '#' + 对应页面的id
比如&a href="#first-block"&
用 jQuery 对这些 a 标签绑定一个 click 事件，用 event.preventDefault() 去掉点击马上跳过去的功能，然后用 jQuery 的 animate() 去控制滚动条就好了。
$("a").on('click', function(event){
var $anchor = $(this);
$("html, body").stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
event.preventDefault();
鼠标点击大概就是这个思路。
鼠标滚轮其实也差不多的思路。
题主说的那个动画效果，coding采用的应该只是简单的css3动画，通过css3的动画类，很简单的几行代码就能达到这种效果。
你如果用IE8去访问coding，它会提示你浏览器版本过低，因为IE8是不支持css3动画效果的，甚至IE9可能也会提示你（我这没有所以无法最终确认）。
css3动画教程：
并且coding使用了AngularJS这种“高大上”的js框架，配合css3实现这种动画效果更是易如反掌。
当然，楼上童鞋回答的是jquery的方案，类似这种效果的插件我相信是有更丰富的现成解决方案的。
你只是把 body 中的 touchmove 事件 prevent 掉了。
捕获到你想要拖动的 div 的 touchmove 事件就行了。
javascriptdocument.querySelectorAll('div')[0].ontouchmove = function(e) {
// do something
问题解决T_T 犯蠢了。。。
禁止body的触摸移动的默认动作之后
document.body.ontouchmove=function(e){
e.preventDefault();
在需要滚动拖拽的div上停止冒泡即可解决OAQ
div.ontouchmove=function(e){
e.stopPropagation();
//停止冒泡
添加你想要问的问题
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发客服微信如何让DIV固定在页面的某个位置而不随着滚动条随意滚动 -
- ITeye技术网站
博客分类：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""&&html xmlns=""&&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&title&如何让DIV固定在页面的某个位置而不随着滚动条随意滚动&/title&&style type="text/css"&
html,body {
width:100%;
height:100%;
}/**把body中的所有信息给隐藏了**/
.virtual_body {
width:100%;
height:100%;
overflow-y:
overflow-x:
}/**用一个层来模仿body**/
.fixed_div {
z-index:2008;
background:#e5e5e5;
}/**用定位来控制层的位置**/
&div class="fixed_div"&I am still here!&/div&
&div class="virtual_body"&
&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&
javaimlike
浏览: 60299 次
来自: 北京
不错，兄弟，谢谢了在做WEB UI设计的时候，拖动某个HTML元素已经成为一种不能忽视的用户界面模式，比较典型的应用例子就是Dialog，一个元素是怎么实现拖动的呢？其实原理非常简单，要想实现首先得了解几个基本知识。
绝对定位：只有把元素的position属性设置为absolute并且或者fixed才可以实现拖动，默认情况下元素会按文档流中的位置自行决定其出现在页面上的位置，是不能移动的，而绝对定位的元素可以使元素脱离文档流，相对于其定位的父元素或者屏幕定位，可以利用这点儿，通过改变元素与已定位父元素的位移来实现元素拖动。关于定位知识具体可以看看。
鼠标事件：当鼠标按下、移动、弹起的时候都会触发相应事件，当鼠标按下的时候同时会触发相应元素click事件，并且冒泡到document，上面提到改变元素与定位父容器位移可以在这些事件中实现。关于事件相关知识可以看看
要拖动的Dialog
写个简易的Dialog供拖动测试使用
&!DOCTYPE html&
&title&Test&/title&
&style type="text/css" &
height:100%;
width:100%;
padding:0;
height:250
background-color:#
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
box-shadow:1px 1px 3px #292929;
.dialog-title
background-color:#404040;
font-size:12
font-weight:
padding:4px 6
.dialog-content
&div id="dlgTest" class="dialog"&
&div class="dialog-title"&Dialog&/div&
&div class="dialog-content"&
This is a draggable test.
看起来是酱紫的
为了简单，这里就不照顾浏览器兼容性问题了，先基于Chrome实现。上面的Dialog定位夫容器为document，鼠标event对象包含clientX和clientY两个属性，标识鼠标当前相对ViewPort（可视窗口）位置，可以在移动的时候改变Dialog的left和top属性值实现其移动。
var isDialogTitle=
function down(e){
if(e.target.className.indexOf('dialog-title')!=-1){
isDialogTitle=
function move(e){
var dialog=document.getElementById('dlgTest');
if(isDialogTitle){//只有点击Dialog Title的时候才能拖动
dialog.style.left=e.clientX+'px';
dialog.style.top=e.clientY+'px';
function up(e){
isDialogTitle=
document.addEventListener('mousedown',down);
document.addEventListener('mousemove',move);
document.addEventListener('mouseup',up);
这样拖动效果就实现了，为了确保只有鼠标点击Dialog Title的时候才拖动，当鼠标按下的时候要判断事件源，如果是Dialog Title区域的话，把isDialogTitle标记设为true，鼠标移动的时候首先要判断isDialogTitle，在鼠标弹起的时候将标记设为false。
一跳一跳的
亲自试过demo的同学肯定可以当开始移动的时候Dialog会跳一下，这是怎么个情况？仔细看看代码发现在移动初始，代码就把Dialog的left和top设为了鼠标当前位置，可是用户在拖动的时候不会刻意去点Dialog的左上角，这样就跳了，soga！改进一下
var draggingObj= //dragging Dialog
var diffX=0;
var diffY=0;
function down(e){
if(e.target.className.indexOf('dialog-title')!=-1){
draggingObj=e.target.offsetP
diffX=event.clientX-draggingObj.offsetL
diffY=event.clientY-draggingObj.offsetT
function move(e){
var dialog=document.getElementById('dlgTest');
if(draggingObj){//只有点击Dialog Title的时候才能拖动
dialog.style.left=(e.clientX-diffX)+'px';
dialog.style.top=(e.clientY-diffY)+'px';
function up(e){
draggingObj=
document.addEventListener('mousedown',down);
document.addEventListener('mousemove',move);
document.addEventListener('mouseup',up);
经过改动后不再跳跃了，但是很暴露的感觉，最开始定义的三个变量都暴露在window下，而且这种写法相当的没有通用性，万一以后Dialog Title变了呢，凡是用过此方法的地方都得改一遍，万一Title内部还有子元素，点击其子元素的时候怎么办？既然如此，穿件衣服封装一下
var Dragging=function(validateHandler){ //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null
var draggingObj= //dragging Dialog
var diffX=0;
var diffY=0;
function mouseHandler(e){
switch(e.type){
case 'mousedown':
draggingObj=validateHandler(e);//验证是否为可点击移动区域
if(draggingObj!=null){
diffX=e.clientX-draggingObj.offsetL
diffY=e.clientY-draggingObj.offsetT
case 'mousemove':
if(draggingObj){
draggingObj.style.left=(e.clientX-diffX)+'px';
draggingObj.style.top=(e.clientY-diffY)+'px';
case 'mouseup':
draggingObj =
enable:function(){
document.addEventListener('mousedown',mouseHandler);
document.addEventListener('mousemove',mouseHandler);
document.addEventListener('mouseup',mouseHandler);
disable:function(){
document.removeEventListener('mousedown',mouseHandler);
document.removeEventListener('mousemove',mouseHandler);
document.removeEventListener('mouseup',mouseHandler);
包装一下果真变好看多了，代码不难看懂，有几个注意点，Dragging函数的validateHandler参数并不是什么阿猫阿狗，正如注释所言为了解决刚才提到几个需求变更问题，validateHandler是一个自定义函数的句柄，这个函数用于识别点击元素是否触发移动，是的话需要返回欲移动元素，这样就可以灵活的触发移动并决定移动那个元素了（点击的和移动的不一定是一个），Dragging函数返回一个对象，对象中有两个方法，分别可以使元素可移动/禁止移动，看看怎么使用
function getDraggingDialog(e){
var target=e.
while(target && target.className.indexOf('dialog-title')==-1){
target=target.offsetP
if(target!=null){
return target.offsetP
Dragging(getDraggingDialog).enable();
首先定义一个识别函数，然后作为参数调用Dragging函数，并调用返回值的enable方法，这样元素就可以拖动了。
&!DOCTYPE html&
&title&Test&/title&
&style type="text/css" &
height:100%;
width:100%;
padding:0;
height:250
background-color:#
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
box-shadow:1px 1px 3px #292929;
.dialog-title
background-color:#404040;
font-size:12
font-weight:
padding:4px 6
.dialog-content
&div id="dlgTest" class="dialog"&
&div class="dialog-title"&Dialog&/div&
&div class="dialog-content"&
This is a draggable test.
&script type="text/javascript"&
var Dragging=function(validateHandler){ //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null
var draggingObj= //dragging Dialog
var diffX=0;
var diffY=0;
function mouseHandler(e){
switch(e.type){
case 'mousedown':
draggingObj=validateHandler(e);//验证是否为可点击移动区域
if(draggingObj!=null){
diffX=e.clientX-draggingObj.offsetL
diffY=e.clientY-draggingObj.offsetT
case 'mousemove':
if(draggingObj){
draggingObj.style.left=(e.clientX-diffX)+'px';
draggingObj.style.top=(e.clientY-diffY)+'px';
case 'mouseup':
draggingObj =
enable:function(){
document.addEventListener('mousedown',mouseHandler);
document.addEventListener('mousemove',mouseHandler);
document.addEventListener('mouseup',mouseHandler);
disable:function(){
document.removeEventListener('mousedown',mouseHandler);
document.removeEventListener('mousemove',mouseHandler);
document.removeEventListener('mouseup',mouseHandler);
function getDraggingDialog(e){
var target=e.
while(target && target.className.indexOf('dialog-title')==-1){
target=target.offsetP
if(target!=null){
return target.offsetP
Dragging(getDraggingDialog).enable();
这种拖动处理方式看起来不错了，但是还有几点儿遗憾
1. 前面提到的浏览器兼容性问题，这种写法在低版本IE浏览器上是不能运行的
2. 边界检查，细心的同学发现Dialog不但可以拖动了，还可以使页面出现滚动条无限拖动，大部分情况下我们希望Dialog在可视窗口、文档（固有滚动条内）或者固定区域内拖动，这种方式没有做到此限制
3. 拖动卡顿，在这个demo中不会出现此问题，文档结构简单拖动流畅，可视在庞大的页面中如果鼠标移动速度过快，Dialog会跟不上鼠标，出现卡顿，这时候如果鼠标在Dialog外面，mouseup事件不会生效，拖动就停不下来，只能把鼠标移回Dialog在mouseup
阅读(...) 评论()