译者:Flyingis
JavaScript擅长于修改页面中的DOM元素,但是我们使用JavaScript通常只是实现一些简单功能,例如实现图片的翻转,网页中的标签页,等等。这篇文章将向你展示如何在页面中,对创建的元素实现拖放。
有许多理由让你在页面中加入拖放的功能,其中最简单的理由是重新组织数据。举个例子,你可能希望用户能够重组一系列的页面元素,通过放置一个input或select组件在各个元素的旁边来代表它们的顺序是一种解决方案,使该组元素可以被拖放是一种替代方案。或者也许你想在网站上拥有一个可以被用户移动的导航窗口。这些都是使用拖放功能的简单理由,因为你能够实现!
在你的网页上实现拖放的效果并不是很复杂。首先,我们知道鼠标的位置,然后我们需要了解用户什么时候点击一个元素,以至于我们知道要准备开始拖动它,最后我们要移动这个元素。
捕获鼠标的移动
第一步,我们需要获取鼠标的坐标,通过一个函数并赋给document.onmousemove可以实现这一功能:
首先我们需要解释一下event对象。不论你什么时候移动、点击鼠标,或按键,等等,一个事件都会发生。在IE中,这个事件是全局的,它被存储在window.event中,对于Firefox,及其他的浏览器来说,这个事件将被传递到任何指向这个页面动作的函数中。因此,我们使document.onmousemove指向鼠标移动的函数,鼠标移动的函数获得事件对象。
上述代码中,ev在所有浏览器环境中都包含了event对象。在Firefox里,"||window.event"将被忽略,因为它已经包含事件。在IE中,ev的值为空,以至于需要将它的值设置为window.event。
本文中我们需要多次捕获到鼠标的坐标,因此我们写了一个mouseCoords方法,它有一个参数:event。
我们要再次讨论IE和其他浏览器之间的差异。Firefox和其他的浏览器使用event.pageX和event.pageY来表示鼠标相对于document文档的位置。如果你有一个500*500的窗口,并且鼠标位于窗口中间,那么pageX和pageY的值将都是250。如果你将窗口向下滚动500象素,pageY的值为750。
如此相反的是,微软的IE使用event.clientX和event.clientY来表示鼠标相对于window窗口的位置,而不是当前document文档。在相同的例子中,如果将鼠标放置于500*500窗口的中间,clientX和clientY值将均为250。如果向下滚动页面,clientY将仍为250,因为它是相对于window窗口来测量,而不是当前的document文档。因此,在鼠标位置中,我们应该引入document文档body区域的scrollLeft和scrollTop属性。最后,IE中document文档实际并不在(0,0)的位置,在它周围有一个小(通常有2px)边框,document.body.clientLeft和document.body.clientTop包含了这个边框的宽度,从而还需要在鼠标位置中引入它们。
幸运的是,现在我们拥有了mouseCoords函数,不用再为获取鼠标位置担心了。
捕获鼠标的点击
下一步,我们必须知道鼠标何时点击及何时释放。如果我们跳过这一步,只要你的鼠标移动经过这些元素时,都将产生拖动这些元素的效果,这是令人讨厌并违反人的直觉的。
在这里,有两个函数可以帮助我们:onmousedown和onmouseup。先前我们已将document.onmousemove指向一个函数,因此从逻辑上似乎应该使document.onmousedown和document.onmouseup都指向函数。如果我们让document.onmousedown指向一个函数,那么这个函数将会因为鼠标点击任何元素而执行:文本、图像、表格,等等。我们只想页面中特定的元素具有被拖放的功能,因此,我们可以通过如下方法实现:
我们现在有了一个变量dragObject,包含了你点击的任何元素。当你释放鼠标的时候,dragObject被设置为空,从而在dragObject非空的时候,我们需要进行拖动操作。
原文链接: http://www.webreference.com/programming/javascript/mk/column2/index.html
续文: [翻译] 如何在 JavaScript 中实现拖放(中) [翻译] 如何在 JavaScript 中实现拖放(下)
JavaScript擅长于修改页面中的DOM元素,但是我们使用JavaScript通常只是实现一些简单功能,例如实现图片的翻转,网页中的标签页,等等。这篇文章将向你展示如何在页面中,对创建的元素实现拖放。
有许多理由让你在页面中加入拖放的功能,其中最简单的理由是重新组织数据。举个例子,你可能希望用户能够重组一系列的页面元素,通过放置一个input或select组件在各个元素的旁边来代表它们的顺序是一种解决方案,使该组元素可以被拖放是一种替代方案。或者也许你想在网站上拥有一个可以被用户移动的导航窗口。这些都是使用拖放功能的简单理由,因为你能够实现!
在你的网页上实现拖放的效果并不是很复杂。首先,我们知道鼠标的位置,然后我们需要了解用户什么时候点击一个元素,以至于我们知道要准备开始拖动它,最后我们要移动这个元素。
捕获鼠标的移动
第一步,我们需要获取鼠标的坐标,通过一个函数并赋给document.onmousemove可以实现这一功能:
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
};
}
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
};
}
首先我们需要解释一下event对象。不论你什么时候移动、点击鼠标,或按键,等等,一个事件都会发生。在IE中,这个事件是全局的,它被存储在window.event中,对于Firefox,及其他的浏览器来说,这个事件将被传递到任何指向这个页面动作的函数中。因此,我们使document.onmousemove指向鼠标移动的函数,鼠标移动的函数获得事件对象。
上述代码中,ev在所有浏览器环境中都包含了event对象。在Firefox里,"||window.event"将被忽略,因为它已经包含事件。在IE中,ev的值为空,以至于需要将它的值设置为window.event。
本文中我们需要多次捕获到鼠标的坐标,因此我们写了一个mouseCoords方法,它有一个参数:event。
我们要再次讨论IE和其他浏览器之间的差异。Firefox和其他的浏览器使用event.pageX和event.pageY来表示鼠标相对于document文档的位置。如果你有一个500*500的窗口,并且鼠标位于窗口中间,那么pageX和pageY的值将都是250。如果你将窗口向下滚动500象素,pageY的值为750。
如此相反的是,微软的IE使用event.clientX和event.clientY来表示鼠标相对于window窗口的位置,而不是当前document文档。在相同的例子中,如果将鼠标放置于500*500窗口的中间,clientX和clientY值将均为250。如果向下滚动页面,clientY将仍为250,因为它是相对于window窗口来测量,而不是当前的document文档。因此,在鼠标位置中,我们应该引入document文档body区域的scrollLeft和scrollTop属性。最后,IE中document文档实际并不在(0,0)的位置,在它周围有一个小(通常有2px)边框,document.body.clientLeft和document.body.clientTop包含了这个边框的宽度,从而还需要在鼠标位置中引入它们。
幸运的是,现在我们拥有了mouseCoords函数,不用再为获取鼠标位置担心了。
捕获鼠标的点击
下一步,我们必须知道鼠标何时点击及何时释放。如果我们跳过这一步,只要你的鼠标移动经过这些元素时,都将产生拖动这些元素的效果,这是令人讨厌并违反人的直觉的。
在这里,有两个函数可以帮助我们:onmousedown和onmouseup。先前我们已将document.onmousemove指向一个函数,因此从逻辑上似乎应该使document.onmousedown和document.onmouseup都指向函数。如果我们让document.onmousedown指向一个函数,那么这个函数将会因为鼠标点击任何元素而执行:文本、图像、表格,等等。我们只想页面中特定的元素具有被拖放的功能,因此,我们可以通过如下方法实现:
document.onmouseup
=
mouseUp;
var dragObject = null ;
function makeClickable(object) {
object.onmousedown = function() {
dragObject = this;
}
}
function mouseUp(ev) {
dragObject = null;
}
var dragObject = null ;
function makeClickable(object) {
object.onmousedown = function() {
dragObject = this;
}
}
function mouseUp(ev) {
dragObject = null;
}
我们现在有了一个变量dragObject,包含了你点击的任何元素。当你释放鼠标的时候,dragObject被设置为空,从而在dragObject非空的时候,我们需要进行拖动操作。
原文链接: http://www.webreference.com/programming/javascript/mk/column2/index.html
续文: [翻译] 如何在 JavaScript 中实现拖放(中) [翻译] 如何在 JavaScript 中实现拖放(下)