Fork me on GitHub
可拖动的DIV续

可拖动的DIV续

之前写过一篇可拖动的DIV讲如何实现可拖动的元素，最后提出了几点不足，这篇文章主要就是回答着三个问题

1. 浏览器兼容性

2. 边界检查

3. 拖动卡顿、失灵

先附上上次代码

 View Code

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
html,body
{
height:100%;
width:100%;
padding:0;
margin:0;
}

.dialog
{
width:250px;
height:250px;
position:absolute;
background-color:#ccc;
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
box-shadow:1px 1px 3px #292929;
margin:10px;
}

.dialog-title
{
color:#fff;
background-color:#404040;
font-size:12pt;
font-weight:bold;
padding:4px 6px;
cursor:move;
}

.dialog-content
{
padding:4px;
}
</style>
</head>
<body>
<div id="dlgTest" class="dialog">
<div class="dialog-title">Dialog</div>
<div class="dialog-content">
This is a draggable test.
</div>
</div>
<script type="text/javascript">
var Dragging=function(validateHandler){ //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null
var draggingObj=null; //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.offsetLeft;
diffY=e.clientY-draggingObj.offsetTop;
}
break;

case 'mousemove':
if(draggingObj){
draggingObj.style.left=(e.clientX-diffX)+'px';
draggingObj.style.top=(e.clientY-diffY)+'px';
}
break;

case 'mouseup':
draggingObj =null;
diffX=0;
diffY=0;
break;
}
};

return {
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.target;
while(target && target.className.indexOf('dialog-title')==-1){
target=target.offsetParent;
}
if(target!=null){
return target.offsetParent;
}else{
return null;
}
}

Dragging(getDraggingDialog).enable();
</script>
</body>
</html>

 

浏览器兼容性

这个是最好解决的问题了，看看上面代码涉及到浏览器兼容性的地方无非就是event获取及事件源获取、事件绑定，为此特意写两个函数来做此事。

复制代码
 1  function addEvent(element, type, key, handler) {//绑定事件处理程序
 2             if (element[type + key])
 3                 return false;
 4             if (typeof element.addEventListener != "undefined") {
 5                 element[type + key] = handler;
 6                 element.addEventListener(type, handler, false);
 7             }
 8             else {
 9                 element['e' + type + key] = handler;
10                 element[type + key] = function () {
11                     element['e' + type + key](window.event); //解决IE浏览器event及this问题
12                 };
13                 element.attachEvent('on' + type, element[type + key]);
14             }
15             return true;
16         }
17 
18         function removeEvent(element, type, key) {//移除事件
19             if (!element[type + key])
20                 return false;
21 
22             if (typeof element.removeEventListener != "undefined") {
23                 element.removeEventListener(type, element[type + key], false);
24             }
25             else {
26                 element.detachEvent("on" + type, element[type + key]);
27                 element['e' + type + key] = null;
28             }
29 
30             element[type + key] = null;
31             return true;
32         }
复制代码

 

使用这两个函数用于添加和移除事件，就可以解决浏览器兼容性问题，有兴趣的同学可以研究一下，这是根据jQuery作者John Resig写法的改版，参数key是绑定函数的自定义唯一标识，用于removeEvent时取消绑定，改版后代码是这样

复制代码
 1   var Dragging = function (validateHandler) { //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null 
 2             var draggingObj = null; //dragging Dialog 
 3             var diffX = 0; 
 4             var diffY = 0;
 5 
 6             function mouseHandler(e) { 
 7                 switch (e.type) { 
 8                     case 'mousedown': 
 9                         draggingObj = validateHandler(e);//验证是否为可点击移动区域 
10                         if (draggingObj != null) { 
11                             diffX = e.clientX - draggingObj.offsetLeft; 
12                             diffY = e.clientY - draggingObj.offsetTop; 
13                         } 
14                         break;
15 
16                     case 'mousemove': 
17                         if (draggingObj) { 
18                             draggingObj.style.left = (e.clientX - diffX) + 'px'; 
19                             draggingObj.style.top = (e.clientY - diffY) + 'px'; 
20                         } 
21                         break;
22 
23                     case 'mouseup': 
24                         draggingObj = null; 
25                         diffX = 0; 
26                         diffY = 0; 
27                         break; 
28                 } 
29             };
30 
31             return { 
32                 enable: function () { 
33                     addEvent(document, 'mousedown', 'drag-down', mouseHandler); 
34                     addEvent(document, 'mousemove', 'drag-move', mouseHandler); 
35                     addEvent(document, 'mouseup', 'drag-up', mouseHandler); 
36                 }, 
37                 disable: function () { 
38                     removeEvent(document, 'mousedown', 'drag-down'); 
39                     removeEvent(document, 'mousemove', 'drag-move'); 
40                     removeEvent(document, 'mouseup', 'drag-up'); 
41                 } 
42             } 
43         }
44 
45         function getDraggingDialog(e) { 
46             var target = e && e.target ? e.target : window.event.srcElement; 
47             while (target && target.className.indexOf('dialog-title') == -1) { 
48                 target = target.offsetParent; 
49             } 
50             if (target != null) { 
51                 return target.offsetParent; 
52             } else { 
53                 return null; 
54             } 
55         }
56 
57         Dragging(getDraggingDialog).enable();
复制代码

 

边界处理

这个问题说起来也简单，可以在函数调用的时候传入边界值，每次移动的时候判断是否出了边界，这样改动一下

 

复制代码
 1         var Dragging = function (conf) { //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null
 2             var draggingObj = null; //dragging Dialog
 3             var diffX = 0, diffY = 0;
 4 
 5             var minX = conf.left != undefined ? conf.left : Number.NEGATIVE_INFINITY;
 6             var maxX = conf.right != undefined ? conf.right : Number.POSITIVE_INFINITY;
 7             var minY = conf.top != undefined ? conf.top : Number.NEGATIVE_INFINITY;
 8             var maxY = conf.bottom != undefined ? conf.bottom : Number.POSITIVE_INFINITY;
 9 
10             var draggingObjWidth = 0,
11                 draggingObjHeight = 0;
12 
13             function mouseHandler(e) {
14                 switch (e.type) {
15                     case 'mousedown':
16                         draggingObj = conf.validateHandler(e);//验证是否为可点击移动区域
17                         if (draggingObj != null) {
18                             diffX = e.clientX - draggingObj.offsetLeft;
19                             diffY = e.clientY - draggingObj.offsetTop;
20                             var size = draggingObj.getBoundingClientRect();
21                             draggingObjWidth = size.right - size.left;
22                             draggingObjHeight = size.bottom - size.top;
23                         }
24                         break;
25 
26                     case 'mousemove':
27                         if (draggingObj) {
28                             var x = e.clientX - diffX;
29                             var y = e.clientY - diffY;
30                             if (x > minX && x < maxX - draggingObjWidth) {
31                                 draggingObj.style.left = x + 'px';
32                             }
33                             if (y > minY && y < maxY - draggingObjHeight) {
34                                 draggingObj.style.top = y + 'px';
35                             }
36                         }
37                         break;
38 
39                     case 'mouseup':
40                         draggingObj = null;
41                         diffX = 0;
42                         diffY = 0;
43                         break;
44                 }
45             };
46 
47             return {
48                 enable: function () {
49                     addEvent(document, 'mousedown', 'drag-down', mouseHandler);
50                     addEvent(document, 'mousemove', 'drag-move', mouseHandler);
51                     addEvent(document, 'mouseup', 'drag-up', mouseHandler);
52                 },
53                 disable: function () {
54                     removeEvent(document, 'mousedown', 'drag-down');
55                     removeEvent(document, 'mousemove', 'drag-move');
56                     removeEvent(document, 'mouseup', 'drag-up');
57                 }
58             }
59         }
60 
61         function getDraggingDialog(e) {
62             var target = e && e.target ? e.target : window.event.srcElement;
63             while (target && target.className.indexOf('dialog-title') == -1) {
64                 target = target.offsetParent;
65             }
66             if (target != null) {
67                 return target.offsetParent;
68             } else {
69                 return null;
70             }
71         }
72 
73         var config = {
74             validateHandler: getDraggingDialog,
75             top: document.documentElement.clientTop,
76             right: document.documentElement.clientWidth,
77             bottom: document.documentElement.clientHeight,
78             left: document.documentElement.clientLeft
79         }
80 
81         Dragging(config).enable();
复制代码

 

如果希望Dialog只能在可视窗口拖动，就可以像上面那样对config参数自定义四个边界值，如果仍然希望没有边界的拖动，则可以四个边界问题不处理，但是validateHandler属性是必须的。

拖动卡顿、失效

关于拖动卡顿在复杂的页面有位明显，一个重要原因就是拖动的时候计算太多导致，不要以为在若动的时候页面就仅仅处理拖动部分的代码，没拖动细微的一下页面都要进行reflow，计算布局所有页面元素的位置，所以复杂的页面自然会卡顿，我们能够处理的只能是是代码的计算尽量简单，为了防止误导读者，我在上面的版本中其实已经做了此项工作，把能够提前计算的的变量值尽量都在函数初始化、mousedown的时候做，再就是尽量使用值变量，避免JavaScript[频繁层层搜索变量引用，看一下低效版的拖动（可不要学会）

 

复制代码
 1    function mouseHandler(e) {
 2             switch (e.type) {
 3                 case 'mousedown':
 4                     draggingObj = conf.validateHandler(e);//验证是否为可点击移动区域
 5                     break;
 6 
 7                 case 'mousemove':
 8                     if (draggingObj) {
 9                         diffX = e.clientX - draggingObj.offsetLeft; //如果这两句也不定义变量，每次使用都要取event的属性值和draggingObj的属性值
10                         diffY = e.clientY - draggingObj.offsetTop;
11                         var size = draggingObj.getBoundingClientRect(); //每移动一下都要算一下大小，实际没必要，拖动不不会改变元素大小
12 
13                         if ((e.clientX - diffX) > minX && (e.clientX - diffX) < maxX - (size.right - size.left)) {//每次都要再算两遍e.clientX - diffX
14                             draggingObj.style.left = x + 'px';
15                         }
16                         if ((e.clientY - diffY) > minY && (e.clientY - diffY) < maxY - (size.bottom - size.top)) {//每次都要再算两遍e.clientY - diffY
17                             draggingObj.style.top = y + 'px';
18                         }
19                     }
20                     break;
21 
22                 case 'mouseup':
23                     draggingObj = null;
24                     diffX = 0;
25                     diffY = 0;
26                     minX = 0;
27                     break;
28             }
29         };
复制代码

 

有同学会说了你都处理了为什么每次还是会拖着拖着就鼠标就出去了，然后就失效了呢？仔细看看每次失效的时候页面上中会伴随着文字被选中，而且仔细观察这个真的会影响拖动，处理一下，拖动的时候不允许选中文字

复制代码
.disable-select *
        {
            -moz-user-select: none;
            -ms-user-select: none;
            -webkit-user-select: none;
            user-select: none;
        }
复制代码

 

复制代码
 1 function mouseHandler(e) {
 2             switch (e.type) {
 3                 case 'mousedown':
 4                     draggingObj = conf.validateHandler(e);//验证是否为可点击移动区域
 5                     if (draggingObj != null) {
 6                         diffX = e.clientX - draggingObj.offsetLeft;
 7                         diffY = e.clientY - draggingObj.offsetTop;
 8 
 9                         var size = draggingObj.getBoundingClientRect();
10                         draggingObjWidth = size.right - size.left;
11                         draggingObjHeight = size.bottom - size.top;
12                         document.body.className += '  disable-select'; //禁止选中
13                         document.body.onselectstart = function () { return false; };
14                     }
15                     break;
16 
17                 case 'mousemove':
18                     if (draggingObj) {
19                         var x = e.clientX - diffX;
20                         var y = e.clientY - diffY;
21                         if (x > minX && x < maxX - draggingObjWidth) {
22                             draggingObj.style.left = x + 'px';
23                         }
24                         if (y > minY && y < maxY - draggingObjHeight) {
25                             draggingObj.style.top = y + 'px';
26                         }
27                     }
28                     break;
29 
30                 case 'mouseup':
31                     draggingObj = null;
32                     diffX = 0;
33                     diffY = 0;
34                     document.body.className = document.body.className.replace('  disable-select', '');
35                     document.body.onselectstart = null;
36                     break;
37             }
38         };
复制代码

最后

最后的源码就是这样的

 

 View Code

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
html, body
{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}

.dialog
{
width: 250px;
height: 250px;
position: absolute;
background-color: #ccc;
-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;
}

.dialog-title
{
color: #fff;
background-color: #404040;
font-size: 12pt;
font-weight: bold;
padding: 4px 6px;
cursor: move;
}

.dialog-content
{
padding: 4px;
}

.disable-select *
{
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div id="dlgTest" class="dialog">
<div class="dialog-title">Dialog</div>
<div class="dialog-content">
This is a draggable test.
</div>
</div>

<script type="text/javascript">
function addEvent(element, type, key, handler) {//绑定事件处理程序
if (element[type + key])
return false;
if (typeof element.addEventListener != "undefined") {
element[type + key] = handler;
element.addEventListener(type, handler, false);
}
else {
element['e' + type + key] = handler;
element[type + key] = function () {
element['e' + type + key](window.event); //解决IE浏览器event及this问题
};
element.attachEvent('on' + type, element[type + key]);
}
return true;
}

function removeEvent(element, type, key) {//移除事件
if (!element[type + key])
return false;

if (typeof element.removeEventListener != "undefined") {
element.removeEventListener(type, element[type + key], false);
}
else {
element.detachEvent("on" + type, element[type + key]);
element['e' + type + key] = null;
}

element[type + key] = null;
return true;
}
</script>

<script type="text/javascript">
var Dragging = function (conf) { //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null
var draggingObj = null; //dragging Dialog
var diffX = 0, diffY = 0;

var minX = conf.left != undefined ? conf.left : Number.NEGATIVE_INFINITY;
var maxX = conf.right != undefined ? conf.right : Number.POSITIVE_INFINITY;
var minY = conf.top != undefined ? conf.top : Number.NEGATIVE_INFINITY;
var maxY = conf.bottom != undefined ? conf.bottom : Number.POSITIVE_INFINITY;

var draggingObjWidth = 0,
draggingObjHeight = 0;

function mouseHandler(e) {
switch (e.type) {
case 'mousedown':
draggingObj = conf.validateHandler(e);//验证是否为可点击移动区域
if (draggingObj != null) {
diffX = e.clientX - draggingObj.offsetLeft;
diffY = e.clientY - draggingObj.offsetTop;

var size = draggingObj.getBoundingClientRect();
draggingObjWidth = size.right - size.left;
draggingObjHeight = size.bottom - size.top;
document.body.className += ' disable-select'; //禁止选中
document.body.onselectstart = function () { return false; };
}
break;

case 'mousemove':
if (draggingObj) {
var x = e.clientX - diffX;
var y = e.clientY - diffY;
if (x > minX && x < maxX - draggingObjWidth) {
draggingObj.style.left = x + 'px';
}
if (y > minY && y < maxY - draggingObjHeight) {
draggingObj.style.top = y + 'px';
}
}
break;

case 'mouseup':
draggingObj = null;
diffX = 0;
diffY = 0;
document.body.className = document.body.className.replace(' disable-select','');
document.body.onselectstart = null;
break;
}
};

return {
enable: function () {
addEvent(document, 'mousedown', 'drag-down', mouseHandler);
addEvent(document, 'mousemove', 'drag-move', mouseHandler);
addEvent(document, 'mouseup', 'drag-up', mouseHandler);
},
disable: function () {
removeEvent(document, 'mousedown', 'drag-down');
removeEvent(document, 'mousemove', 'drag-move');
removeEvent(document, 'mouseup', 'drag-up');
}
}
}

function getDraggingDialog(e) {
var target = e && e.target ? e.target : window.event.srcElement;
while (target && target.className.indexOf('dialog-title') == -1) {
target = target.offsetParent;
}
if (target != null) {
return target.offsetParent;
} else {
return null;
}
}

var config = {
validateHandler: getDraggingDialog,
top: document.documentElement.clientTop,
right: document.documentElement.clientWidth,
bottom: document.documentElement.clientHeight,
left: document.documentElement.clientLeft
};

Dragging(config).enable();
</script>
</body>
</html>

 

试试真的好了很多，然而鼠标要是移动的快还是会拖离，以为就是这样了呢，但试了试jQuery的Dialog控件，拖动基本流畅，这让人情何以堪，今天天气好，出去找妹子了，改天研究研究jQuery是怎么写的吧

 
 
分类: JavaScript
posted on 2013-08-31 23:54  HackerVirus  阅读(218)  评论(0)  编辑  收藏  举报
Powered by:
博客园
Copyright © 2024 HackerVirus
Powered by .NET 8.0 on Kubernetes