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

核心提示： 然后把用户定义的keyHTML添加到元素上，我相信这个链接是用来触发键盘事件的，JavaScript CSS修改学习第六章：拖拽(4)，然后为这个链接设置键盘的触发程序，然后存储主元素在relatedElement里面，代码的最复杂的部分就要跟踪位置的变化，然后给出dX和dY（X和Y的变化），我

然后把用户定义的keyHTML添加到元素上，我相信这个链接是用来触发键盘事件的。然后为这个链接设置键盘的触发程序。然后存储主元素在relatedElement里面，我们后面需要。

现在代码就等用户动作了

基本位置信息

我打算使用下面的方法来：首先我会读取拖拽元素的初始位置，保存在startX和startY里面。然后计算鼠标移动的位置或者键盘控制下移动的位置来决定元素从初始位置移动的范围。

startX和startY通过startDrag函数来设置，这个函数在鼠标和键盘事件里都会用到。

1　startDrag:　function　(obj)　{
2　　　　　if　(dragDrop.draggedObject)
3　　　　　　　　　dragDrop.releaseElement();
4　　　　　dragDrop.startX　=　obj.offsetLeft;
5　　　　　dragDrop.startY　=　obj.offsetTop;
6　　　　　dragDrop.draggedObject　=　obj;
7　　　　　obj.className　+=　'　dragged';
8　},

首先，如果元素处于拖拽状态，那么我们就释放他（我们后面再讲）。

然后函数会找到元素在起始位置的坐标（offsetLeft和offsetTop），然后保存在startX和startY以备后用。

然后在draggedObject里面保存一个对象的引用。然后给他添加dragged类，这样就可以通过CSS来设置拖拽时候的样式了

当用户使用鼠标或者键盘拖拽元素的时候，代码的最复杂的部分就要跟踪位置的变化。然后给出dX和dY（X和Y的变化）。然后加上startX和startY就是元素现在的位置。

编缉推荐阅读以下文章

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