在网页上实现拖拽其实不难,第一我们需要知道鼠标的位置,第二我们需要知道当用户点击一个网页元素时这个元素要能够拖拽。
--------------------------------------------------------------
点此查看示例一
--------------------------------------------------------------
获取鼠标移动信息
开始我们需要获取鼠标的坐标.我们添加一个document.onmousemove 就可以达到此目的:
Javascript:
-
-
document.onmousemove = mouseMove;
-
-
function mouseMove(ev){
-
ev = ev || window.event;
-
var mousePos = mouseCoords(ev);
-
}
-
-
function mouseCoords(ev){
-
if(ev.pageX || ev.pageY){
-
return {x:ev.pageX, y:ev.pageY};
-
}
-
return {
-
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
-
y:ev.clientY + document.body.scrollTop - document.body.clientTop
-
};
-
}
-
--------------------------------------------------------------
点此查看示例二
--------------------------------------------------------------
我们首先要声明一个 evnet 对象,无论移动、点击、按键等,都会激活一个 evnet ,在 Internet Explorer 里, event 是全局变量,会被存储在 window.event 里. 在 firefox 或者其他浏览器,event 会被相应的函数获取.当我们将mouseMove函数赋值于document.onmousemove,mouseMove 会获取鼠标移动事件。
为了让 ev 在所有浏览器下获取了 event 事件,在Firefox下"||window.event"将不起作用,因为ev已经有了赋值。在 MSIE 中 ev 为空,所以得到 window.event 。
因为在这篇文章中我们需要多次获取鼠标位置,所以我们设计了一个 mouseCoords 函数,它包含一个参数 : event 。
因为我们要在 MSIE 和其他浏览器下运行,Firefox 和其他浏览器用 event.pageX 和 event.pageY 来表示鼠标相对于文档的位置,如果你有一个 500*500 的窗口并且你的鼠标在绝对中间,那么 pageX 和 pageY 的值都是 250,如果你向下滚动 500, 那么 pageY 将变成 750。
MSIE 正好相反,它使用 event.clientX 和 event.clientY 表示鼠标相当于窗口的位置,而不是文档。在同样的例子中,如果你向下滚动500,clientY 依然是 250,因此,我们需要添加 scrollLeft 和 scrollTop 这两个相对于文档的属性。最后,MSIE 中文档并不是从 0,0 开始,而是通常有一个小的边框(通常是 2 象素),边框的大小定义在 document.body.clientLeft 和 clientTop 中,我们也把这些加进去。
很幸运,我们现在已经用 mouseCoords 函数解决了坐标问题,不需为此费心了。
捕捉鼠标点击
下面我们需要知道鼠标什么时候点击和什么时候释放,如果你跳过此步,当你的鼠标移动到这些可拖动的元素是,他们就开始“拖动”了,这将是非常恼人并且违反直觉的。
这里有两个函数帮助我们:onmousedown 和 onmouseup ,我们预先设置一个函数获取 document.onmousedown 和 document.onmouseup,这样看起来我们已经能够获取 document.onmousedown 和 document.onmouseup,但是,当我们获取了 document.onmousedown ,同时也激活了点击属性,如:text, images, tables 等,但是我们只想取得那些能够拖动得属性,所有我们设置函数来获取我们想要移动的对象。
Javascript:
-
-
document.
onmouseup = mouseUp;
-
var dragObject =
null;
-
-
function makeClickable
(object
)
{
-
object.
onmousedown =
function
(
)
{
-
dragObject =
this;
-
}
-
}
-
-
function mouseUp
(ev
)
{
-
dragObject =
null;
-
}
-
我们现在有了一个可定义的 dragObject,它获取你点击的任意元素,如果你释放鼠标按钮, dragObject 被清空,所以如果 dragObject != null ,我们就知道我们可能在拖动着什么。
--------------------------------------------------------------
点此查看示例三
--------------------------------------------------------------
移动一个元素
我们现在已经知道如何捕捉鼠标的移动和点击,剩下的就是拖动了,
首先,要明确我们想要拖动的位置,将 position 设置为 “absolute” 意味着当你设置 style.top 或 style.left ,这个尺度是从页面的 top-left 开始算的,这样我们就可以继续了。
当我们设置 item.style.position='absolute',所有的需要做的就是改变 top 或 left 的值,这样就可以移动了。
Javascript:
-
-
document.onmousemove = mouseMove;
-
document.onmouseup = mouseUp;
-
-
var dragObject = null;
-
var mouseOffset = null;
-
-
function getMouseOffset(target, ev){
-
ev = ev || window.event;
-
-
var docPos = getPosition(target);
-
var mousePos = mouseCoords(ev);
-
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
-
}
-
-
function getPosition(e){
-
var left = 0;
-
var top = 0;
-
-
while (e.offsetParent){
-
left += e.offsetLeft;
-
top += e.offsetTop;
-
e = e.offsetParent;
-
}
-
-
left += e.offsetLeft;
-
top += e.offsetTop;
-
-
return {x:left, y:top};
-
}
-
-
function mouseMove(ev){
-
ev = ev || window.event;
-
var mousePos = mouseCoords(ev);
-
-
if(dragObject){
-
dragObject.style.position = 'absolute';
-
dragObject.style.top = mousePos.y - mouseOffset.y;
-
dragObject.style.left = mousePos.x - mouseOffset.x;
-
-
return false;
-
}
-
}
-
function mouseUp(){
-
dragObject = null;
-
}
-
-
function makeDraggable(item){
-
if(!item) return;
-
item.onmousedown = function(ev){
-
dragObject = this;
-
mouseOffset = getMouseOffset(this, ev);
-
return false;
-
}
-
}
-
--------------------------------------------------------------
点此查看示例四
--------------------------------------------------------------
你可能注意到这些代码基本上是前面的集合,将前面的示例合在一起,就可以实现拖拽了。
当我们点击一个元素,我们还会获取其他变量,mouseOffset 定义着我们的鼠标位置,如果我们有一个 20*20 的图片,并且点击在它的中间,那么 mouseOffset 就是 {x:10, y:10},如果点击在图片的 top-left ,这个值就是 {x:0, y:0} 。我们用这些方法获取我们的鼠标和图片的信息,如果忽略这些,我们将永远处在相同的元素位置。
我们的 mouseOffset 函数使用了另外的函数 getPosition,getPosition 的目的是返回元素相当于文档的位置,我们仅仅读取 item.offsetLeft 或 item.style.left ,将得到元素相对于其父元素的位置,而不是整个文档,所有的脚本都是相对于文档,这样就会好一些。
为了完成 getPosition 的任务,必须循环取得此的父级,我们将得到元素的 left-top 的位置.我们可以管理想要的 top 与 left 列表.
当我们有了这些信息,并且移动鼠标,mouseMove 将一直运行,首先,我们要确定元素的 style.position 是 absolute,接着我们拖拽元素到任何我们我们已经定义好的位置,当鼠标释放,dragObject 被重置, mouseMove 将不再做任何事情。
拖拽一个元素
前面的例子目的很简单,就是拖拽item到我们希望到的地方.我们经常还有其他目的如删除item,比如我们可以将item拖到垃圾桶里,或者其他页面定义的位置.
很不幸,我们有一个很大的难题,当我们拖拽,item会在鼠标之下,比如mouseove,mousedown,mouseup或者其他mouse action.如果我们拖拽一个item到垃圾桶上,鼠标信息还在item上,不在垃圾桶上.
怎么解决这个问题呢?有几个方法可以来解决.第一,这是以前比较推荐的,我们在移动鼠标时item会跟随鼠标,并占用了mouseover/mousemove等鼠标事件,我们不这样做,只是让item跟随着鼠标,并不占用mouseover等鼠标事件,这样会解决问题,但是这样并不好看,我们还是希望item能直接跟在mouse下.
另一个选择是不做item的拖拽.你可以改变鼠标指针来显示需要拖拽的item,然后放在鼠标释放的位置.这个解决方案,也是因为美学原因不予接受.
最后的解决方案是,我们并不去除拖拽效果.这种方法比前两种繁杂许多,我们需要定义我们需要释放目标的列表,当鼠标释放时,手工去检查释放的位置是否是在目标列表位置上,如果在,说明是释放在目标位置上了.
Javascript:
-
-
/*
-
All code from the previous example is needed with the exception
-
of the mouseUp function which is replaced below
-
*/
-
-
var dropTargets =
[
];
-
-
function addDropTarget
(dropTarget
)
{
-
dropTargets.
push
(dropTarget
);
-
}
-
-
function mouseUp
(ev
)
{
-
ev = ev || window.
event;
-
var mousePos = mouseCoords
(ev
);
-
-
for
(
var i=
0; i<dropTargets.
length; i++
)
{
-
var curTarget = dropTargets
[i
];
-
var targPos = getPosition
(curTarget
);
-
var targWidth = parseInt
(curTarget.
offsetWidth
);
-
var targHeight = parseInt
(curTarget.
offsetHeight
);
-
-
if
(
-
(mousePos.
x > targPos.
x
) &&
-
(mousePos.
x <
(targPos.
x + targWidth
)
) &&
-
(mousePos.
y > targPos.
y
) &&
-
(mousePos.
y <
(targPos.
y + targHeight
)
)
)
{
-
// dragObject was dropped onto curTarget!
-
}
-
}
-
-
dragObject =
null;
-
}
-
--------------------------------------------------------------
点此查看示例五
--------------------------------------------------------------
鼠标释放时会去取是否有drop属性,如果存在,同时鼠标指针还在drop的范围内,执行drop操作.我们检查鼠标指针位置是否在目标范围是用(mousePos.x>targetPos.x),而且还要符合条件(mousePos.x<(targPos.x + targWidth)).如果所有的条件符合,说明指针确实在范围内,可以执行drop指令了.
把所有的内容集合到一起
最后我们拥有了所有的drag/drop的脚本片断!下一个事情是我们将创建一个DOM处理。
下面的代码将创建container(容器),而且使任何一个需要drag/drop的item变成一个容器的item.代码在这个文章第二个demo的后面,它可以用户记录一个list(列表),定为一个导航窗口在左边或者右边,或者更多的函数你可以想到的.
下一步我们将通过"假代码"让reader看到真代码,下面为推荐:
- 当document第一次载入时,创建dragHelper DIV.dragHelper将给移动的item加阴影.真实的item没有被dragged,只是用了insertBefor和appendChild来移动了,我们隐藏了dragHelper
- 有了mouseDown与mouseUp函数.所有的操作会对应到当到iMouseDown的状态中,只有当mouse左键为按下时iMouseDown才为真,否则为假.
- 我们创建了全局变量DragDrops与全局函数CreateDragContainer.DragDrops包含了一系列相对彼此的容器.任何参数(containers)将通过CreatedcragContainer进行重组与序列化,这样可以自由的移动.CreateDragContainer函数也将item进行绑定与设置属性.
- 现在我们的代码知道每个item的加入,当我们移动处mouseMove,mouseMove函数首先会设置变量target,鼠标移动在上面的item,如果这个item在容器中(checked with getAttribute):
- 运行一小段代码来改变目标的样式.创造rollover效果
- 检查鼠标是否没有放开,如果没有
- 设置curTarget代表当前item
- 记录item的当前位置,如果需要的话,我们可以将它返回
- 克隆当前的item到dragHelper中,我们可以移动带阴影效果的item.
- item拷贝到dragHelper后,原有的item还在鼠标指针下,我们必须删除掉dragObj,这样脚本起作用,dragObj被包含在一个容器中.
- 抓取容器中所有的item当前坐标,高度/宽度,这样只需要记录一次,当item被drag时,每随mouse移动,每移钟就会记录成千上万次.
- 如果没有,不需要做任何事,因为这不是一个需要移动的item
- 检查curTarget,它应该包含一个被移动的item,如果存在,进行下面操作
- 开始移动带有阴影的item,这个item就是前文所创建的
- 检查每个当前容器中的container,是否鼠标已经移动到这些范围内了
- 我们检查看一下正在拖动的item是属于哪个container
- 放置item在一个container的某一个item之前,或者整个container之后
- 确认item是可见的
- 如果鼠标不在container中,确认item是不可见了.
- 剩下的事就是捕捉mouseUp的事件了
Javascript:
下面的三个demo是记录事件历史.当你的鼠标在item上移动,将记录所生的事件,如果你不明白可以尝试一下鼠标的划过或者拖动,看有什么发生.
--------------------------------------------------------------
点此查看示例六
--------------------------------------------------------------
转载自: http://www.codebit.cn/pub/html/javascript/tutorial/how_to_drag_and_drop_in_javascript/
这是一篇翻译文章,原文地址:
http://www.webreference.com/programming/javascript/mk/column2/index.html