您的位置：首页 > Web前端 > JavaScript

javascript的拖放入门（转）

2009-09-10 09:06 197 查看

既然说是入门，本文给出的函数都尽可能短小，但不失强大，并兼容所有浏览器。要想拖动页面上的一个元素，说白了就是让它实现位移。CSS中最能体现这种思想的是绝对定位，因为绝对定位能使元素脱离原来的文档流，但原来的物理空间还保留着，这就不影响周围的元素了。接着下来就是设置事件侦听器，分别在mousedown，mousemove，mouseup绑定对应的回调函数，一旦触发这些事件，浏览器就会自动调用它们。我们分别把这些回调函数命名为dragstart，drag与dragend。

在dragstart方法中，我们的工作取得鼠标相对于事件源的距离。IE中，我们可以很轻松地用offsetX与offsetY实现，在firefox中我们要用layerX与layerY。其他浏览器大多数是墙头草，两个都实现，但Opera是IE那一方的。为了实现全面兼容，就要绕点远路，利用e.clientX - el.offsetLeft与e.clientY - el.offsetTop获取它们。并在此方法中开始监听mousemove与mouseup事件。
在drag方法，我们要将拖动的距离加到原来的top与left上，以实现位移。拖动过程，可能引发沿文本的被选中，我们需要清除文本。
在dragend方法，我们要卸载绑定事件，释放内存。

为了共享方法，我们把它们都做成原型方法。

01.

var

Drag =

function

(id){

02.

this

.node = document.getElementById(id);

03.

this

.node.style.position =

"absolute"

04.

this

.node.me =

this

//保存自身的引用

05.

this

.node.onmousedown =

this

.dragstart;

//监听mousedown事件

06.

07.

Drag.prototype = {

08.

constructor:Drag,

09.

dragstart:

function

(e){

10.

var

e = e || window.event,

//获得事件对象

11.

self =

this

.me,

//获得拖动对象

12.

node = self.node;

//获得拖动元素

13.

//鼠标光标相对于事件源对象的坐标

14.

node.offset_x = e.clientX - node.offsetLeft;

15.

node.offset_y = e.clientY - node.offsetTop;

16.

node.onmousemove =self.drag;

//监听mousemove事件

17.

node.onmouseup =self.dragend;

//监听mouseup事件

18.

},

19.

drag:

function

(e){

20.

var

e = e || window.event,

//获得事件对象

21.

self =

this

.me,

//获得拖动对象

22.

node = self.node;

//获得拖动元素

23.

node.style.cursor =

"pointer"

24.

//将拖动的距离加再在原先的left与top上，以实现位移

25.

!+

"\v1"

? document.selection.empty() : window.getSelection().removeAllRanges();

26.

node.style.left = e.clientX - node.offset_x+

"px"

27.

node.style.top = e.clientY - node.offset_y+

"px"

28.

node.onmouseup =self.dragend;

//监听mouseup事件

29.

},

30.

dragend:

function

(){

31.

var

self =

this

.me,

//获得拖动对象

32.

node = self.node;

//获得拖动元素

33.

node.onmousemove =

null

34.

node.onmouseup =

null

35.

36.

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style type="text/css">
#drag {width:100px;height:100px;background:red;z-index:200;}
</style>

<script type="text/javascript">
var Drag =function(id){
this.node = document.getElementById(id);
this.node.style.position ="absolute"
this.node.me =this;//保存自身的引用
this.node.onmousedown =this.dragstart;//监听mousedown事件
}
Drag.prototype = {
constructor:Drag,
dragstart:function(e){
var e = e || window.event,//获得事件对象
self =this.me,//获得拖动对象
node = self.node;//获得拖动元素
//鼠标光标相对于事件源对象的坐标
node.offset_x = e.clientX - node.offsetLeft;
node.offset_y = e.clientY - node.offsetTop;
node.onmousemove =self.drag;//监听mousemove事件
node.onmouseup =self.dragend;//监听mouseup事件
},
drag:function(e){
var e = e || window.event,//获得事件对象
self =this.me,//获得拖动对象
node = self.node;//获得拖动元素
node.style.cursor ="pointer";
//将拖动的距离加再在原先的left与top上，以实现位移
!+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
node.style.left = e.clientX - node.offset_x+ "px";
node.style.top = e.clientY - node.offset_y+ "px";
node.onmouseup =self.dragend;//监听mouseup事件
},
dragend:function(){
var self =this.me,//获得拖动对象
node = self.node;//获得拖动元素
node.onmousemove =null;
node.onmouseup =null;
}
}
window.onload = function(){
new Drag("drag");
};
</script>
<title>Drag and Drop</title>
</head>
<body>
<p>拖动时可能被选中的文本……………………</p>
<div id="drag"></div>
<table class="filement_table">
<thead>
<tr>
<th>nodeType</th>
<th>
</th>
<th>
nodeName
</th>
<th>
nodeValue
</th>
<th>
attributes
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Element</td>
<td>tagName大写</td>
<td>null</td>
<td>NamedNodeMap</td>
</tr>
<tr>
<td>2</td>
<td>Attr</td>
<td>name of attribute小写</td>
<td>value of attribute</td>
<td>null</td>
</tr>
<tr>
<td>3</td>
<td>Text</td>
<td>#text</td>
<td>content of the text node</td>
<td>null</td>
</tr>
<tr>
<td>4</td>
<td>CDATASection</td>
<td>#cdata-section</td>
<td>content of the CDATA Section</td>
<td>null</td>
</tr>
<tr>
<td>5</td>
<td>EntityReference</td>
<td>name of entity referenced</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>6</td>
<td>Entity</td>
<td>entity name</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>7</td>
<td>ProcessingInstruction</td>
<td>target</td>
<td>entire content excluding the target</td>
<td>null</td>
</tr>
<tr>
<td>8</td>
<td>Comment</td>
<td>#comment</td>
<td>content of the comment</td>
<td>null</td>
</tr>
<tr>
<td>9</td>
<td>Document</td>
<td>#document</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>10</td>
<td>DocumentType</td>
<td>document type name</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>11</td>
<td>DocumentFragment</td>
<td>#document-fragment</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>12</td>
<td>Notation</td>
<td>notation name</td>
<td>null</td>
<td>null</td>
</tr>
</tbody>
</table>

</body>
</html>

运行代码

现在我们的类就可以运作了，但正如你们所看到的那样，当鼠标拖动太快会出现鼠标移出div的情况。这是因为移动得越快，位移的距离就越大，拖动元素一下子从我们的鼠标溜走了，就无法调用mouseup事件。在IE中我们可以利用setCapture()来补救，但一旦某个元素调用setCapture()，文档中所有后续的鼠标事件都会在冒泡之前传到该元素，直到调用了releaseCapture()。换言之，在完成这些鼠标事件之前，它是不执行其他事件，一直占着线程，于是出现了我们的光标离开拖动元素的上方也能拖动元素的怪异现象。

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style type="text/css">
#drag {width:100px;height:100px;background:red;z-index:200;}
</style>

<script type="text/javascript">
var Drag =function(id){
this.node = document.getElementById(id);
this.node.style.position ="absolute"
this.node.me =this;//保存自身的引用
this.node.onmousedown =this.dragstart;//监听mousedown事件
}
Drag.prototype = {
constructor:Drag,
dragstart:function(e){
var e = e || window.event,//获得事件对象
self =this.me,//获得拖动对象
node = self.node;//获得拖动元素
//鼠标光标相对于事件源对象的坐标
node.offset_x = e.clientX - node.offsetLeft;
node.offset_y = e.clientY - node.offsetTop;
node.onmousemove =self.drag;//监听mousemove事件
node.onmouseup =self.dragend;//监听mouseup事件
},
drag:function(e){
var e = e || window.event,//获得事件对象
self =this.me,//获得拖动对象
node = self.node;//获得拖动元素
node.style.cursor ="pointer";
//将拖动的距离加再在原先的left与top上，以实现位移
!+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
if(!+"\v1"){node.setCapture();}
node.style.left = e.clientX - node.offset_x+ "px";
node.style.top = e.clientY - node.offset_y+ "px";
node.onmouseup =self.dragend;//监听mouseup事件
},
dragend:function(){
var self =this.me,//获得拖动对象
node = self.node;//获得拖动元素
node.onmousemove =null;
node.onmouseup =null;
}
}
window.onload = function(){
new Drag("drag");
};
</script>
<title>Drag and Drop</title>
</head>
<body>
<p>拖动时可能被选中的文本……………………</p>
<div id="drag"></div>
<table class="filement_table">
<thead>
<tr>
<th>nodeType</th>
<th>
</th>
<th>
nodeName
</th>
<th>
nodeValue
</th>
<th>
attributes
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Element</td>
<td>tagName大写</td>
<td>null</td>
<td>NamedNodeMap</td>
</tr>
<tr>
<td>2</td>
<td>Attr</td>
<td>name of attribute小写</td>
<td>value of attribute</td>
<td>null</td>
</tr>
<tr>
<td>3</td>
<td>Text</td>
<td>#text</td>
<td>content of the text node</td>
<td>null</td>
</tr>
<tr>
<td>4</td>
<td>CDATASection</td>
<td>#cdata-section</td>
<td>content of the CDATA Section</td>
<td>null</td>
</tr>
<tr>
<td>5</td>
<td>EntityReference</td>
<td>name of entity referenced</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>6</td>
<td>Entity</td>
<td>entity name</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>7</td>
<td>ProcessingInstruction</td>
<td>target</td>
<td>entire content excluding the target</td>
<td>null</td>
</tr>
<tr>
<td>8</td>
<td>Comment</td>
<td>#comment</td>
<td>content of the comment</td>
<td>null</td>
</tr>
<tr>
<td>9</td>
<td>Document</td>
<td>#document</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>10</td>
<td>DocumentType</td>
<td>document type name</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>11</td>
<td>DocumentFragment</td>
<td>#document-fragment</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>12</td>
<td>Notation</td>
<td>notation name</td>
<td>null</td>
<td>null</td>
</tr>
</tbody>
</table>

</body>
</html>

运行代码

你在拖动块上点一下，然后再到拖动块外面点一下，就可以实现"隔空拖动"的神奇效果了！(当然只限IE)

由于鼠标事件一直接着线程，所以在我们不用的时候，一定要releaseCapture()来解放它。

在firefox中我们可以使用window.captureEvents()，火狐说这方法已经废弃，但我怎么在各标准浏览器中运作良好呢？！不过不管怎么样，来来回回要设置捕获与取消捕获非常麻烦与吃内存，我们需要转换思路。因为如果鼠标离开拖动元素上方，我们的绑定函数就无法运作，要是把它们绑定在document上呢，鼠标就无论在何处都能监听拖动元素。但触发拖动的onmousedown事件我们还保留在拖动元素上，这事件不会因为不执行就引起差错之虞。不过，由于绑定对象一变，我们要在这些事件中获得拖动对象的引用的难度就陡然加大，这里我就直接把它们做成构造函数内的私有函数吧。

01.

var

Drag =

function

(id){

02.

var

el = document.getElementById(id);

03.

el.style.position =

"absolute"

04.

var

drag =

function

(e) {

05.

e = e || window.event;

06.

el.style.cursor =

"pointer"

07.

!+

"\v1"

? document.selection.empty() : window.getSelection().removeAllRanges();

08.

el.style.left = e.clientX - el.offset_x+

"px"

09.

el.style.top = e.clientY - el.offset_y+

"px"

10.

el.innerHTML = parseInt(el.style.left,10)+

"X"

+parseInt(el.style.top,10);

11.

12.

13.

var

dragend =

function

(){

14.

document.onmouseup =

null

15.

document.onmousemove =

null

16.

17.

18.

var

dragstart =

function

(e){

19.

e = e || window.event;

20.

el.offset_x = e.clientX - el.offsetLeft;

21.

el.offset_y = e.clientY - el.offsetTop;

22.

document.onmouseup =dragend;

23.

document.onmousemove =drag;

24.

return

false

25.

26.

el.onmousedown = dragstart;

27.

01.

var

Drag =

function

(id){

02.

var

el = document.getElementById(id);

03.

el.style.position =

"absolute"

04.

var

drag =

function

(e){

05.

var

e = e || window.event,

06.

button = e.button || e.which;

07.

if

(button == 1 && e.shiftKey ==

false

){

08.

el.style.cursor =

"pointer"

09.

!+

"\v1"

? document.selection.empty() : window.getSelection().removeAllRanges();

10.

el.style.left = e.clientX - el.offset_x+

"px"

11.

el.style.top = e.clientY - el.offset_y+

"px"

12.

el.innerHTML = parseInt(el.style.left,10)+

" x "

+parseInt(el.style.top,10);

13.

else

14.

document.onmousemove =

null

15.

16.

17.

var

dragstart =

function

(e){

18.

e = e || window.event;

19.

el.offset_x = e.clientX - el.offsetLeft;

20.

el.offset_y = e.clientY - el.offsetTop;

21.

el.style.zIndex = ++Drag.z;

22.

document.onmousemove =drag;

23.

return

false

24.

25.

Drag.z = 999;

26.

el.onmousedown = dragstart;

27.

01.

var

getCoords =

function

(el){

02.

var

box = el.getBoundingClientRect(),

03.

doc = el.ownerDocument,

04.

body = doc.body,

05.

html = doc.documentElement,

06.

clientTop = html.clientTop || body.clientTop || 0,

07.

clientLeft = html.clientLeft || body.clientLeft || 0,

08.

top= box.top+ (self.pageYOffset || html.scrollTop||body.scrollTop ) - clientTop,

09.

left = box.left + (self.pageXOffset || html.scrollLeft ||body.scrollLeft) - clientLeft

10.

return

'top'

: top,

'left'

: left };

11.

};

接着我们要取得容器的四个点的坐标：

1.

_cCoords = getCoords(container),

2.

_cLeft = _cCoords.left,

3.

_cTop = _cCoords.top,

4.

_cRight = _cLeft + container.clientWidth,

5.

_cBottom = _cTop + container.clientHeight;

接着是拖动元素的四个点的坐标：

1.

var

_left = el.offsetLeft,

2.

_top = el.offsetTop,

3.

_right = _left + el.offsetWidth,

4.

_bottom = _top + el.offsetHeight,

但是这样取得的是没有拖动前的坐标，拖动时的坐标在上面的方案2也已给出了：

1.

var

_left = e.clientX - el.offset_x,

2.

_top = e.clientY - el.offset_y,

修正坐标很简单，如果拖动元素在左边或上边超出容器，就让拖动元素的top与left取容器的_cLeft或_cTop值，如果从右边超出容器，我们用_cRight减去容器的宽度再赋给拖动元素的top，下边的处理相仿。

01.

if

(_left <_cLeft){

02.

_left = _cLeft

03.

04.

if

(_top <_cTop){

05.

_top = _cTop

06.

07.

if

(_right >_cRight){

08.

_left = _cRight - el.offsetWidth;

09.

10.

if

(_bottom >_cBottom){

11.

_top = _cBottom - el.offsetHeight;

12.

13.

el.style.left = _left+

"px"

14.

el.style.top = _top+

"px"

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style type="text/css">
.drag {width:100px;height:100px;z-index:200;}
#drag1 {background:red}
#drag2 {background:#E8D098;}
#drag3 {background:#fff;}
#drag4 {background:#E8FFE8;}
#drag5 {background:#ff0;}
#drag6 {background:#66c;}
#parent {width:300px;height:300px;background:blue;}
</style>
<script type="text/javascript">
var getCoords =function(el){
var box = el.getBoundingClientRect(),
doc = el.ownerDocument,
body = doc.body,
html = doc.documentElement,
clientTop = html.clientTop || body.clientTop || 0,
clientLeft = html.clientLeft || body.clientLeft || 0,
top= box.top+ (self.pageYOffset || html.scrollTop||body.scrollTop ) - clientTop,
left = box.left + (self.pageXOffset || html.scrollLeft ||body.scrollLeft) - clientLeft
return {'top': top,'left': left };
};
var Drag =function(id){
var el = document.getElementById(id),
options= arguments[1] || {},
container = options.container || document.documentElement,
limit = false || options.limit;
el.style.position ="absolute";
var drag =function(e) {
e = e || window.event;
el.style.cursor ="pointer";
!+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
var _left = e.clientX - el.offset_x,
_top = e.clientY - el.offset_y;
if(limit){
var _right = _left + el.offsetWidth,
_bottom = _top + el.offsetHeight,
_cCoords = getCoords(container),
_cLeft = _cCoords.left,
_cTop = _cCoords.top,
_cRight = _cLeft + container.clientWidth,
_cBottom = _cTop + container.clientHeight;
if(_left <_cLeft){
_left = _cLeft
}
if(_top <_cTop){
_top = _cTop
}
if(_right >_cRight){
_left = _cRight - el.offsetWidth;
}
if(_bottom >_cBottom){
_top = _cBottom - el.offsetHeight;
}
}
el.style.left = _left+ "px";
el.style.top = _top+ "px";
el.innerHTML = parseInt(el.style.left,10)+" x "+parseInt(el.style.top,10);
}

var dragend =function(){
document.onmouseup =null;
document.onmousemove =null;
}

var dragstart =function(e){
e = e || window.event;
el.offset_x = e.clientX - el.offsetLeft;
el.offset_y = e.clientY - el.offsetTop;
document.onmouseup =dragend;
document.onmousemove =drag;
el.style.zIndex = ++Drag.z;
return false;
}
Drag.z = 999;
el.onmousedown = dragstart;
}

window.onload = function(){
var p = document.getElementById("parent");
new Drag("drag1",{container:p,limit:true});
new Drag("drag2",{container:p,limit:true});
new Drag("drag3",{container:p,limit:true});
new Drag("drag4",{container:p,limit:true});
new Drag("drag5",{container:p,limit:true});
new Drag("drag6",{container:p,limit:true});
};
</script>
<title>拖动</title>
</head>
<body id="body">

<div id="parent">
<p>拖动时可能被选中的文本……………………</p>
<div id="drag1" class="drag"></div>
<div id="drag2" class="drag"></div>
<div id="drag3" class="drag"></div>
<div id="drag4" class="drag"></div>
<div id="drag5" class="drag"></div>
<div id="drag6" class="drag"></div>
</div>

</body>
</html>

运行代码

水平锁定与垂直锁直也是两个很常用的功能，我们也来实现它。原理很简单，在开始拖动时就把top与left保存起来，待到拖动时再赋给它就行了。代码请直接看运行框的代码：

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style type="text/css">
.drag {width:100px;height:100px;z-index:200;}
#drag1 {background:red}
#drag2 {background:#E8D098;}
#drag3 {background:#fff;}
#drag4 {background:#E8FFE8;}
#drag5 {background:#ff0;}
#drag6 {background:#66c;}
#parent {width:300px;height:300px;background:blue;}
</style>
<script type="text/javascript">
var getCoords =function(el){
var box = el.getBoundingClientRect(),
doc = el.ownerDocument,
body = doc.body,
html = doc.documentElement,
clientTop = html.clientTop || body.clientTop || 0,
clientLeft = html.clientLeft || body.clientLeft || 0,
top= box.top+ (self.pageYOffset || html.scrollTop||body.scrollTop ) - clientTop,
left = box.left + (self.pageXOffset || html.scrollLeft ||body.scrollLeft) - clientLeft
return {'top': top,'left': left };
};
var Drag =function(id){
var el = document.getElementById(id),
options= arguments[1] || {},
container = options.container || document.documentElement,
limit = false || options.limit,
lockX = false || options.lockX,
lockY = false || options.lockY;
el.style.position ="absolute";
var drag =function(e) {
e = e || window.event;
el.style.cursor ="pointer";
!+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
var _left = e.clientX - el.offset_x,
_top = e.clientY - el.offset_y;
if(limit){
var _right = _left + el.offsetWidth,
_bottom = _top + el.offsetHeight,
_cCoords = getCoords(container),
_cLeft = _cCoords.left,
_cTop = _cCoords.top,
_cRight = _cLeft + container.clientWidth,
_cBottom = _cTop + container.clientHeight;
_left = Math.max(_left, _cLeft);
_top = Math.max(_top, _cTop);
if(_right >_cRight){
_left = _cRight - el.offsetWidth;
}
if(_bottom >_cBottom){
_top = _cBottom - el.offsetHeight;
}
}
if(lockX){
_left = el.lockX;
}
if(lockY){
_top = el.lockY;
}
el.style.left = _left+ "px";
el.style.top = _top+ "px";
el.innerHTML = parseInt(el.style.left,10)+" x "+parseInt(el.style.top,10);
}

var dragend =function(){
document.onmouseup =null;
document.onmousemove =null;
}

var dragstart =function(e){
e = e || window.event;
if(lockX){
el.lockX = getCoords(el).left;
}
if(lockY){
el.lockY = getCoords(el).top;
}
if(/a/[-1]=='a'){
el.offset_x = e.layerX
el.offset_y = e.layerY
}else{
el.offset_x = e.offsetX
el.offset_y = e.offsetY
}
document.onmouseup =dragend;
document.onmousemove =drag;
el.style.zIndex = ++Drag.z;
return false;
}
Drag.z = 999;
el.onmousedown = dragstart;
}

window.onload = function(){
var p = document.getElementById("parent");
new Drag("drag1",{container:p,limit:true,lockX:true});
new Drag("drag2",{container:p,limit:true,lockY:true});
new Drag("drag3",{container:p,limit:true});
new Drag("drag4",{container:p,limit:true});
new Drag("drag5",{container:p,limit:true});
new Drag("drag6",{container:p,limit:true});
};
</script>
<title>拖动</title>
</head>
<body id="body">
<p>拖动时可能被选中的文本……………………</p>
<div id="parent">
<div id="drag1" class="drag"></div>
<div id="drag2" class="drag"></div>
<div id="drag3" class="drag"></div>
<div id="drag4" class="drag"></div>
<div id="drag5" class="drag"></div>
<div id="drag6" class="drag"></div>
</div>
</body>
</html>

运行代码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航