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

核心提示： 这个函数会读取鼠标现在的坐标，然后减去之前的坐标，JavaScript CSS修改学习第六章：拖拽(7)，把得到的dX和dY传递给sePosition，然后通过返回false来阻止鼠标选择文本的默认属性，（严格来说，当你用鼠标点击链接的时候，Mouseup 当用户松开鼠标的时候，会调用relea

这个函数会读取鼠标现在的坐标，然后减去之前的坐标，把得到的dX和dY传递给sePosition。

然后通过返回false来阻止鼠标选择文本的默认属性。

Mouseup

当用户松开鼠标的时候，会调用releaseElement。我们后面讨论。

键盘部分代码

现在我们开始更复杂的键盘部分代码。不像鼠标拖拽那样，键盘拖拽并没有一个标准。虽说基本的交互不是太复杂，但是最好还是简要说明一下。

基本交互

用来拖拽的键最好是方向键，这很简单。

激活和释放元素是比较有技巧的，在这里我的代码还需要加强。

我觉得如果用键盘来激活的话就应该使用一个我添加的额外的链接。这里没有太多选择：因为链接能够在所有的浏览器里面获得焦点（好吧，表单也可以，你也可是选择复选框），而且把一个链接放置在可拖拽的元素里面也是合乎逻辑的（你可以放在任何地方，但是如何让用户知道那个是用来激活拖拽的呢？）。

我假设当用户点击enter或者Esc的时候释放元素，至少我没找到其他合适的键。你想选择其他的话可以在这里查找键盘代码。

case　13:　//　enter
case　27:　//　escape
　dragDrop.releaseElement();
　return　false;

事件

点击可以激活元素。当鼠标点击链接或者当元素获得焦点的时候点击enter键就能激活。所以键盘代码的激活可以使点击enter键或者点击链接。

（严格来说，当你用鼠标点击链接的时候，元素先被鼠标事件激活然后释放了然后再被键盘模式激活。）

编缉推荐阅读以下文章

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