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

核心提示： 1startDragMouse:function(e){2dragDrop.startDrag(this);3varevt=e||window.event;4dragDrop.initialMouseX=evt.clientX;5dragDrop.initialMouseY=evt.client

1　startDragMouse:　function　(e)　{
2　　　　　dragDrop.startDrag(this);
3　　　　　var　evt　=　e　||　window.event;
4　　　　　dragDrop.initialMouseX　=　evt.clientX;
5　　　　　dragDrop.initialMouseY　=　evt.clientY;
6　　　　　addEventSimple(document,'mousemove',dragDrop.dragMouse);
7　　　　　addEventSimple(document,'mouseup',dragDrop.releaseElement);
8　　　　　return　false;
9　},

首先会执行我们之前讨论过的startDrag。然后查找鼠标的坐标然后保存在initialMouseX和initialMouseY中。后面我们会把鼠标位置跟这个比较。

最后会返回false，这个用来阻止默认鼠标事件：选择文本。我们不想再拖拽的时候有文本被选中，这很烦人。

然后给文档设置mouseup和mousemove事件处理程序。因为有可能文档有他自己的mouseup和mousemove事件处理程序，所以我使用我的addEventSimple函数防止原来的事件处理程序失效。

Mousemove

现在，当用户移动鼠标的时候dragMouse函数就执行了。

1　dragMouse:　function　(e)　{
2　　　　　var　evt　=　e　||　window.event;
3　　　　　var　dX　=　evt.clientX　-　dragDrop.initialMouseX;
4　　　　　var　dY　=　evt.clientY　-　dragDrop.initialMouseY;
5　　　　　dragDrop.setPosition(dX,dY);
6　　　　　return　false;
7　},

编缉推荐阅读以下文章

• JavaScript CSS修改学习第五章：给“上传”添加样式
• JavaScript CSS修改学习第四章：透明度设置
• JavaScript CSS修改学习第三章：修改样式表
• JavaScript CSS修改学习第二章：样式
• JavaScript CSS修改学习第一章：查找位置
• JavaScript CSS Style属性对照表