开发学院网页设计 JavaScript JavaScript CSS修改学习第六章：拖拽阅读

JavaScript CSS修改学习第六章：拖拽

　2010-03-30 00:00:00　来源：WEB开发网　　　

核心提示： 下面的函数用来设定位置：1setPosition:function(dx,dy){2dragDrop.draggedObject.style.left=dragDrop.startX+dx+'px';3dragDrop.draggedObject.style.top=dragDr

下面的函数用来设定位置：

1　setPosition:　function　(dx,dy)　{ 2　　　　　dragDrop.draggedObject.style.left　=　dragDrop.startX　+　dx　+　'px'; 3　　　　　dragDrop.draggedObject.style.top　=　dragDrop.startY　+　dy　+　'px'; 4　},

函数通过鼠标和键盘的移动计算所得的dX和dY与初始位置，来设定元素的新位置。

这部分很简单，复杂的地方就在于dx和dy的获得，鼠标部分和键盘部分的处理非常的不同，我们分别来看。

鼠标部分的代码

鼠标部分的计算方面比键盘的要复杂一些，但是在浏览器兼容性方面问题不大。所以我们从鼠标部分开始。

事件

首先我们来讨论事件。很明显的，在拖拽过程中需要mousedown，mousemove，mouseup用来完成选择对象，拖拽，拖拽完成这几个动作。

这一系列事件从需要拖拽元素的mousedown事件开始。所以所有的拖拽元素都需要这个事件来标明拖拽开始了。我们看到：

1　element.onmousedown　=　dragDrop.startDragMouse;

然而mousemove和mouseup事件不应该设置在元素上而应该设置在整个文档上。因为用户可能很快很疯狂的移动鼠标，然后丢失拖拽元素。如果设置在元素上，因为鼠标不在元素上了所以可能会无法控制，这对于易用性来说不是好事。

如果我们再文档上设置mousemove和mouseup，就没有这个问题。不管鼠标在哪，元素都会响应mousemove和mouseup。这个的易用性就很强。

另外你只能在拖拽开始以后再设置mousemove和mouseup，然后当用户释放元素之后删除它们。这样代码很干净而且节省系统资源，因为mousemove对系统的消耗很大。

Mousedown