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

核心提示： 他会先删除掉原来的事件处理程序，然后将keypress设置为触发dragKeys，JavaScript CSS修改学习第六章：拖拽(9)，因为这个函数只会在支持他的浏览器里面执行，所以我们只在这些浏览器里面将keydown改为keypress，然后我们使用switch语句来决定我们怎么做，这部分

他会先删除掉原来的事件处理程序，然后将keypress设置为触发dragKeys。因为这个函数只会在支持他的浏览器里面执行，所以我们只在这些浏览器里面将keydown改为keypress。

初始键盘代码

当用户点击了连接激活了元素，那么就会调用startDragKeys。

1　startDragKeys:　function　()　{
2　　　　　dragDrop.startDrag(this.relatedElement);
3　　　　　dragDrop.dXKeys　=　dragDrop.dYKeys　=　0;
4　　　　　addEventSimple(document,'keydown',dragDrop.dragKeys);
5　　　　　addEventSimple(document,'keypress',dragDrop.switchKeyEvents);
6　　　　　this.blur();
7　　　　　return　false;
8　},

首先会调用我们之前讨论过的startDrag函数。他会给这个函数传递relatedElement，也就是要拖拽的元素。

然后将dXKeys和dYKeys设置为0。这些变量用来跟踪元素的位移。

然后设置事件处理程序，上面已经讨论过了。

然后移除刚才点击的链接的焦点。我这样做是因为Enter键会释放元素，但是如果不移除焦点，当用户点击了Enter键之后，元素被释放，但是链接却再次被Enter点击，又成了可拖动的模式。如果我们移除焦点，那么问题就不存在了。

最后返回false来阻止默认动作。

通过键盘拖拽

dragKeys负责键盘拖拽：

1　dragKeys:　function(e)　{
2　　　　　var　evt　=　e　||　window.event;
3　　　　　var　key　=　evt.keyCode;

我们首先读取键盘的键值。

然后我们使用switch语句来决定我们怎么做。这部分的目的是更新dXKeys和dYKeys的值，就可以通过设置元素的位置来移动元素了。

编缉推荐阅读以下文章

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