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

核心提示：当示例的box上的#链接处于活动状态的时候（不论是用tab然后点击enter或者使用鼠标点击）这个元素就能够通过方向键拖拽，然后点击enter或者Esc释放，JavaScript CSS修改学习第六章：拖拽，（可以随意改变这些键，我不确定释放键应该设置成为什么所以enter和Esc都可以）使用1、复制文章后面的drag

当示例的box上的#链接处于活动状态的时候（不论是用tab然后点击enter或者使用鼠标点击）这个元素就能够通过方向键拖拽。然后点击enter或者Esc释放。（可以随意改变这些键。我不确定释放键应该设置成为什么所以enter和Esc都可以）

使用

1、复制文章后面的dragDrop对象。

2、复制我的addEventSimple和removeEventSimple函数，这里需要。

3、设定keyHTML和keySpeed属性（下面有解释）。

4、确定你所要拖拽的元素都有位置属性：absolute或者fixed。

5、把所有可拖拽的元素发送到对象的initElement函数。可以发送一个对象或者对象ID的字符串。例如：

dragDrop.initElement('test');
dragDrop.initElement(document.getElementById('test2'));

6、当元素被拖拽过后，代码会自动添加dragged类。你可以添加一些CSS效果。

7、如果你想当用户放开元素之后做一些事情，你可以给releaseElement添加自己的函数。

属性

你需要设置两个属性。

keyHTML包含一个需要拖拽的元素的键盘能访问到的链接的内容。为了保持HTML简洁，这里只添加一个有简单样式的类。你可以随意构建你的HTML，但是要记住一点就是必须有一个链接让键盘能够访问到，键盘用户需要一个焦点来触发拖拽事件。

keySpeed用来设置键盘拖拽的速度，每次按键移动多少像素。我喜欢设置为10，你也可以尝试一下其他的值。

这里还有7个属性，但是都是在代码内部的。初始化的时候都设置为undefined，然后相应的函数会设置他们。

拖拽对象

复制下面这个对象到你的页面，不要忘了addEventSimple和removeEventSimple。

编缉推荐阅读以下文章

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