关于js拖拽早已是老生常谈，网上一搜一大坨，但是有很多并不是很完善，或者兼容性不够，或者功能不全，并且这样的东西还是自己写的好用。我打算在（一）中主要对js拖拽功能的注意点进行罗列，力求简单；在（二）中利用（一）的拖拽去实现类似google个性化首页的拖拽模块功能。
首先贴上完整code（IE/FF/Chrome）
代码
<!
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"
>
<
head
>
<
title
></
title
>
<
script
type
="text/javascript"
>
var
Common
=
{
getEvent:
function
() {
//
ie/ff
if
(document.all) {
return
window.event;
}
func
=
getEvent.caller;
while
(func
!=
null
) {
var
arg0
=
func.arguments[
0
];
if
(arg0) {
if
((arg0.constructor
==
Event
||
arg0.constructor
==
MouseEvent)
||
(
typeof
(arg0)
==
"
object
"
&&
arg0.preventDefault
&&
arg0.stopPropagation)) {
return
arg0;
}
}
func
=
func.caller;
}
return
null
;
},
getMousePos:
function
(ev) {
if
(
!
ev) {
ev
=
this
.getEvent();
}
if
(ev.pageX
||
ev.pageY) {
return
{
x: ev.pageX,
y: ev.pageY
};
}
if
(document.documentElement
&&
document.documentElement.scrollTop) {
return
{
x: ev.clientX
+
document.documentElement.scrollLeft
-
document.documentElement.clientLeft,
y: ev.clientY
+
document.documentElement.scrollTop
-
document.documentElement.clientTop
};
}
else
if
(document.body) {
return
{
x: ev.clientX
+
document.body.scrollLeft
-
document.body.clientLeft,
y: ev.clientY
+
document.body.scrollTop
-
document.body.clientTop
};
}
},
getItself:
function
(id) {
return
"
string
"
==
typeof
id
?
document.getElementById(id) : id;
},
getViewportSize: { w: (window.innerWidth)
?
window.innerWidth : (document.documentElement
&&
document.documentElement.clientWidth)
?
document.documentElement.clientWidth : document.body.offsetWidth, h: (window.innerHeight)
?
window.innerHeight : (document.documentElement
&&
document.documentElement.clientHeight)
?
document.documentElement.clientHeight : document.body.offsetHeight },
isIE: document.all
?
true
:
false
,
setOuterHtml:
function
(obj, html) {
var
Objrange
=
document.createRange();
obj.innerHTML
=
html;
Objrange.selectNodeContents(obj);
var
frag
=
Objrange.extractContents();
obj.parentNode.insertBefore(frag, obj);
obj.parentNode.removeChild(obj);
}
}
//
/------------------------------------------------------------------------------------------------------
var
Class
=
{
create:
function
() {
return
function
() {
this
.init.apply(
this
, arguments); }
}
}
var
Drag
=
Class.create();
Drag.prototype
=
{
init:
function
(titleBar, dragDiv, Options) {
//
设置点击是否透明，默认不透明
titleBar
=
Common.getItself(titleBar);
dragDiv
=
Common.getItself(dragDiv);
this
.dragArea
=
{ maxLeft:
0
, maxRight: Common.getViewportSize.w
-
dragDiv.offsetWidth
-
2
, maxTop:
0
, maxBottom: Common.getViewportSize.h
-
dragDiv.offsetHeight
-
2
};
if
(Options) {
this
.opacity
=
Options.opacity
?
(isNaN(parseInt(Options.opacity))
?
100
: parseInt(Options.opacity)) :
100
;
this
.keepOrigin
=
Options.keepOrigin
?
((Options.keepOrigin
==
true
||
Options.keepOrigin
==
false
)
?
Options.keepOrigin :
false
) :
false
;
if
(
this
.keepOrigin) {
this
.opacity
=
50
; }
if
(Options.area) {
if
(Options.area.left
&&
!
isNaN(parseInt(Options.area.left))) {
this
.dragArea.maxLeft
=
Options.area.left };
if
(Options.area.right
&&
!
isNaN(parseInt(Options.area.right))) {
this
.dragArea.maxRight
=
Options.area.right };
if
(Options.area.top
&&
!
isNaN(parseInt(Options.area.top))) {
this
.dragArea.maxTop
=
Options.area.top };
if
(Options.area.bottom
&&
!
isNaN(parseInt(Options.area.bottom))) {
this
.dragArea.maxBottom
=
Options.area.bottom };
}
}
else
{
this
.opacity
=
100
,
this
.keepOrigin
=
false
;
}
this
.originDragDiv
=
null
;
this
.tmpX
=
0
;
this
.tmpY
=
0
;
this
.moveable
=
false
;
var
dragObj
=
this
;
titleBar.onmousedown
=
function
(e) {
var
ev
=
e
||
window.event
||
Common.getEvent();
//
只允许通过鼠标左键进行拖拽,IE鼠标左键为1 FireFox为0
if
(Common.isIE
&&
ev.button
==
1
||
!
Common.isIE
&&
ev.button
==
0
) {
}
else
{
return
false
;
}
if
(dragObj.keepOrigin) {
dragObj.originDragDiv
=
document.createElement(
"
div
"
);
dragObj.originDragDiv.style.cssText
=
dragDiv.style.cssText;
dragObj.originDragDiv.style.width
=
dragDiv.offsetWidth;
dragObj.originDragDiv.style.height
=
dragDiv.offsetHeight;
dragObj.originDragDiv.innerHTML
=
dragDiv.innerHTML;
dragDiv.parentNode.appendChild(dragObj.originDragDiv);
}
dragObj.moveable
=
true
;
dragDiv.style.zIndex
=
dragObj.GetZindex()
+
1
;
var
downPos
=
Common.getMousePos(ev);
dragObj.tmpX
=
downPos.x
-
dragDiv.offsetLeft;
dragObj.tmpY
=
downPos.y
-
dragDiv.offsetTop;
titleBar.style.cursor
=
"
move
"
;
if
(Common.isIE) {
dragDiv.setCapture();
}
else
{
window.captureEvents(Event.MOUSEMOVE);
}
dragObj.SetOpacity(dragDiv, dragObj.opacity);
//
FireFox 去除容器内拖拽图片问题
if
(ev.preventDefault) {
ev.preventDefault();
ev.stopPropagation();
}
document.onmousemove
=
function
(e) {
if
(dragObj.moveable) {
var
ev
=
e
||
window.event
||
Common.getEvent();
//
IE 去除容器内拖拽图片问题
if
(document.all)
//
IE
{
ev.returnValue
=
false
;
}
var
movePos
=
Common.getMousePos(ev);
dragDiv.style.left
=
Math.max(Math.min(movePos.x
-
dragObj.tmpX, dragObj.dragArea.maxRight), dragObj.dragArea.maxLeft)
+
"
px
"
;
dragDiv.style.top
=
Math.max(Math.min(movePos.y
-
dragObj.tmpY, dragObj.dragArea.maxBottom), dragObj.dragArea.maxTop)
+
"
px
"
;
}
};
document.onmouseup
=
function
() {
if
(dragObj.keepOrigin) {
if
(Common.isIE) {
dragObj.originDragDiv.outerHTML
=
""
;
}
else
{
Common.setOuterHtml(dragObj.originDragDiv,
""
);
}
}
if
(dragObj.moveable) {
if
(Common.isIE) {
dragDiv.releaseCapture();
}
else
{
window.releaseEvents(Event.MOUSEMOVE);
}
dragObj.SetOpacity(dragDiv,
100
);
titleBar.style.cursor
=
"
default
"
;
dragObj.moveable
=
false
;
dragObj.tmpX
=
0
;
dragObj.tmpY
=
0
;
}
};
}
},
SetOpacity:
function
(dragDiv, n) {
if
(Common.isIE) {
dragDiv.filters.alpha.opacity
=
n;
}
else
{
dragDiv.style.opacity
=
n
/
100
;
}
},
GetZindex:
function
() {
var
maxZindex
=
0
;
var
divs
=
document.getElementsByTagName(
"
div
"
);
for
(z
=
0
; z
<
divs.length; z
++
) {
maxZindex
=
Math.max(maxZindex, divs[z].style.zIndex);
}
return
maxZindex;
}
}
window.onload
=
function
() {
new
Drag(
"
dragDiv
"
,
"
dragDiv
"
, { opacity:
100
, keepOrigin:
true
});
//
, area: { left: 50, right: 500, top: 100, bottom: 400}
}
</
script
>
</
head
>
<
body
>
<
div
id
="dragDiv"
style
="position:absolute; background-color:#FFFFFF;border:solid 1px #849BCA;width:200px;left:10px;top:10px;filter:alpha(opacity=100);opacity:1;"
>
<
table
cellpadding
="0"
cellspacing
="0"
border
="0"
style
="width:100%;border-collapse:collapse; "
>
<
tr
id
="titleBar"
style
="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;"
>
<
th
align
="left"
unselectable
="on"
>
Title
</
th
>
</
tr
>
<
tr
style
="height:130px;padding:3px;"
align
="left"
valign
="top"
unselectable
="on"
>
<
td
><
img
src
="http://images.cnblogs.com/logo_small.gif"
alt
="pic for drag"
/>
Content...
</
td
>
<!---->
</
tr
>
</
table
>
</
div
>
<
div
style
="position:absolute; font-family:Tahoma;border:solid 1px #849BCA; background-color:#AAAAAA;width:200px;height:100px;left:210px;top:210px;filter:alpha(opacity=100);opacity:1; z-index:999"
>
Are you able to cover me?
</
div
>
</
body
>
</
html
>
对Drag的使用：在window.onload中，必填参数是titleBar和dragDiv，后者是要拖拽的容器，前者是拖拽容器的可拖拽部位，譬如经常遇到的通过标题栏拖动整个DIV，则titleBar即为改标题栏。而{ opacity: 100, keepOrigin: true , area: { left: 50, right: 500, top: 100, bottom: 400}} 是可选参数，用于扩展功能，opacity设置透明度，keepOrigin设置拖拽过程中是否保留原来拖拽容器，area设置拖拽范围。
- 拖拽的基本原理：当mousedown时记下鼠标点击位置离拖拽容器左边沿的距离和上边沿的距离，即tmpX,tmpY；mousemove时通过定位拖拽容器的style.left/style.top，使拖拽容器进行移动，定位到哪里则由刚刚的tmpX/tmpY和当前鼠标所在位置计算得出；mouseup时，结束移动。
- “var dragObj = this;” 这句是为了在mousedown/mouseup/mousemove事件里对Drag对象的相关变量进行引用。因为在mousedown/mouseup/mousemove里的this是window.
- 当拖拽速度太快导致鼠标移出拖拽容器，而拖拽容器位置未变，用document.mousemove代替titleBar.mousemove即可。
- 设置拖拽容器可拖拽的范围，若未设置，则默认为当前窗口可视范围。Note：在设置范围的时候使用Math.max/min来处理，而不是用If语句判断，用后者的话会导致快速拖拽时未达到容许范围边沿即停止的状况。
- 当拖拽过程中，可设置是否保留原来拖拽容器，当拖拽结束，隐藏原来容器，默认不保留。
- 当拖拽时，可设置拖拽的容器是否透明及透明度多少，默认不透明。但若拖拽过程中设置保留原来拖拽容器，即keepOrigin: true，则设置透明度为50%。
- 使右键、鼠标中键等不能拖动，仅左键单击可以拖动。Note：IE鼠标左键为event.Button=1 FireFox为event.Button=0.
- 解决如果点击在图片上无法拖拽的问题：非常杯具的是IE通过ev.cancelBubble=true;ev.returnValue = false;来防止图片的事件，注意是放在document.onmousemove中，而FireFox通过ev.preventDefault();ev.stopPropagation(); 但是是放在titleBar的mousedown事件中。
- 有一种情况，当浏览器窗口不是最大化的时候，你希望当鼠标在浏览器外移动时，浏览器里的拖拽容器仍然移动，这时就要使用鼠标事件捕获，IE中相应的是dragDiv.setCapture();与dragDiv.releaseCapture(); FF中是window.captureEvents(Event.MOUSEMOVE);与window.releaseEvents(Event.MOUSEMOVE) 。
- 确保每次拖拽时拖拽容器的zindex都不会被其他块元素覆盖。
扫一扫
2239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
