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

核心提示： 拖拽是什么拖拽是在屏幕上移动元素的一种方法，为了让元素能够移动，JavaScript CSS修改学习第六章：拖拽(3)，元素必须有position属性:absolute或者fixed，这样才能通过修改它的坐标（style.top和style.left）让它移动，然后给这个元素设置一个onmous

拖拽是什么

拖拽是在屏幕上移动元素的一种方法。为了让元素能够移动，元素必须有position属性:absolute或者fixed，这样才能通过修改它的坐标（style.top和style.left）让它移动。

（理论上position:relative也可以，但是几乎没用。另外，那样需要额外的数据来计算，这里我没有写）

设置坐标很简单；找到需要设置的元素的坐标是这个代码比较难的部分。大多数代码都是用来处理这个问题的。

另外，保持易用性也比较重要。传统上通过鼠标来拖拽一个元素是最好的办法，但是也要考虑到没有鼠标的用户，所以也要保证键盘的可用性。

基础知识

让我们先来看看一些基础知识

初始化一个元素

每个拖拽代码都从初始化元素开始。这个工作通过下面的函完成：

01　initElement:　function　(element)　{
02　　　　　if　(typeof　element　==　'string')
03　　　　　　　　　element　=　document.getElementById(element);
04　　　　　element.onmousedown　=　dragDrop.startDragMouse;
05　　　　　element.innerHTML　+=　dragDrop.keyHTML;
06　　　　　var　links　=　element.getElementsByTagName('a');
07　　　　　var　lastLink　=　links[links.length-1];
08　　　　　lastLink.relatedElement　=　element;
09　　　　　lastLink.onclick　=　dragDrop.startDragKeys;
10　},

如果函数接收到一个字符串，那么就会当做元素ID来处理。然后给这个元素设置一个onmousedown事件，用来开始鼠标部分的代码。注意这里我使用的是传统事件注册方式；因为我希望this关键字能够在startDragDrop里起作用。

编缉推荐阅读以下文章

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